/* ============================================================
   FuturaSP — Diseñado para dominar el aire
   Sistema de diseño · dirección artística cinematográfica
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --hdr-h: 84px;
  /* Paleta */
  /* TEMA CLARO — fondo claro con degradados pastel (tipo Gamma/Aircall).
     Nombres legacy conservados: --black=base clara, --ivory=texto tinta */
  --black:      #f6f7fd;   /* base clara (off-white azulado) */
  --carbon:     #ffffff;   /* superficie de tarjetas (blanco) */
  --graphite:   #eef1f9;   /* superficie alterna */
  --graphite-2: #e3e7f3;
  --hairline:   rgba(30,42,90,.11);   /* borde sutil oscuro */
  --hairline-2: rgba(30,42,90,.06);

  --ivory:      #161b30;   /* texto principal (tinta azulada) */
  --ivory-dim:  #444b66;   /* texto secundario */
  --mist:       #6c7391;   /* texto atenuado */
  --mist-dim:   #9aa0b6;

  /* Acento azul → violeta (suave) */
  --accent:      #5b6cf5;   /* azul-índigo */
  --accent-br:   #7a86ff;   /* azul claro (hover) */
  --accent-deep: #4453d6;   /* azul profundo */
  --accent-2:    #9a5cff;   /* violeta */
  --accent-glow: rgba(91,108,245,.35);
  --accent-soft: rgba(91,108,245,.10);
  --accent-grad: linear-gradient(120deg, #5b6cf5 0%, #9a5cff 100%);
  --glass:       rgba(255,255,255,.72);   /* tarjeta frosted clara */
  --glass-2:     rgba(255,255,255,.9);
  --shadow-sm:   0 8px 26px rgba(35,45,105,.07);
  --shadow-md:   0 18px 46px rgba(70,80,200,.13);

  /* Tipografía */
  --serif: "Fraunces", "Times New Roman", Georgia, serif;
  --sans:  "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:  "Space Grotesk", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Métrica */
  --maxw: 1280px;
  --gut: clamp(20px, 5vw, 96px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --hdr-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }
.lenis.lenis-stopped{ overflow:hidden }

body{
  font-family:var(--sans);
  background:var(--black);
  color:var(--ivory);
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden }

img,video,canvas{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
input,textarea,select{ font:inherit; color:inherit }
::selection{ background:var(--accent); color:var(--black) }

/* ---------- Grano cinematográfico global ---------- */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Fondo: degradados pastel suaves sobre claro (tipo Gamma/Aircall) ---------- */
.cosmos{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--black);
  background-image:
    radial-gradient(58% 48% at 12% 2%,  rgba(120,140,255,.18), transparent 62%),
    radial-gradient(52% 46% at 92% 6%,  rgba(176,130,255,.16), transparent 64%),
    radial-gradient(60% 54% at 86% 88%, rgba(120,160,255,.15), transparent 66%),
    radial-gradient(56% 50% at 6% 92%,  rgba(210,150,255,.13), transparent 66%),
    radial-gradient(44% 38% at 50% 46%, rgba(150,170,255,.06), transparent 72%);
  background-repeat:no-repeat;
}

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.section{ position:relative; padding-block:clamp(80px,12vh,160px) }
.section--tight{ padding-block:clamp(56px,8vh,110px) }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; gap:.7em; font-weight:500;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--accent); opacity:.6 }

h1,h2,h3{ font-weight:400; line-height:1.05; letter-spacing:-.01em }
.display{
  font-family:var(--serif);
  font-size:clamp(2.4rem, 6vw, 5rem);
  font-weight:380; line-height:.98; letter-spacing:-.02em;
  font-optical-sizing:auto;
}
.h2{
  font-family:var(--serif);
  font-size:clamp(1.9rem, 4.2vw, 3.4rem);
  font-weight:380; line-height:1.02; letter-spacing:-.015em;
}
.lead{
  font-size:clamp(1.05rem,1.6vw,1.35rem); color:var(--ivory-dim);
  font-weight:300; max-width:56ch;
}
.muted{ color:var(--mist) }
.amber{ color:var(--accent) }

/* ---------- Botones ---------- */
.btn{
  --pad:15px 30px;
  display:inline-flex; align-items:center; gap:.7em;
  padding:var(--pad); font-family:var(--sans); font-weight:500;
  font-size:.92rem; letter-spacing:.01em; border-radius:100px;
  transition:transform .5s var(--ease-out), box-shadow .4s, background .4s, color .4s, border-color .4s;
  position:relative; overflow:hidden;
}
.btn--primary{ background:var(--accent-grad); color:#fff; box-shadow:0 8px 24px rgba(109,139,255,.32) }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(140,110,255,.44) }
.btn--ghost{ border:1px solid var(--hairline); color:var(--ivory); background:var(--glass); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-br); transform:translateY(-2px) }
.btn__arrow{ transition:transform .45s var(--ease-out) }
.btn:hover .btn__arrow{ transform:translateX(4px) }
.btn:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:12px;
}

/* ============================================================
   Preloader
   ============================================================ */
#preloader{
  position:fixed; inset:0; z-index:10000; background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:34px; transition:opacity .8s var(--ease), visibility .8s;
}
#preloader.done{ opacity:0; visibility:hidden }
.pl-mark{ display:flex; flex-direction:column; align-items:center; gap:14px }
.pl-logo{ width:auto; height:clamp(52px,10vw,74px); display:block }
.pl-mark .sub{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.5em;
  text-transform:uppercase; color:var(--mist);
}
.pl-bar{ width:min(240px,60vw); height:2px; background:var(--hairline); overflow:hidden; border-radius:12px }
.pl-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent-deep),var(--accent-br)) }
.pl-pct{ font-family:var(--mono); font-size:.72rem; letter-spacing:.25em; color:var(--mist) }

/* ============================================================
   Header
   ============================================================ */
.header{
  position:fixed; top:0; left:0; right:0; z-index:9000; height:var(--hdr-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--hairline);
}
.header__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px }
.logo{ display:flex; align-items:center; z-index:2 }
/* Logo a color real (tema claro) */
.logo__img, .pl-logo, .footer__logo{ filter:none; }
.logo__img{ width:auto; height:clamp(42px,4vw,52px); display:block; image-rendering:auto }

.nav{ display:flex; align-items:center; gap:30px }
.nav a{ font-size:1rem; letter-spacing:.01em; color:var(--ivory-dim); position:relative; padding:6px 0; transition:color .35s }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--accent); transition:width .4s var(--ease-out) }
.nav a:hover{ color:var(--ivory) } .nav a:hover::after{ width:100% }

.header__cta{ display:flex; align-items:center; gap:18px }
.header__phone{ font-family:var(--mono); font-size:.92rem; letter-spacing:.06em; color:var(--ivory); display:inline-flex; align-items:center; gap:8px }
.header__phone b{ color:var(--accent); font-weight:500 }

.burger{ display:none; width:40px; height:40px; position:relative; z-index:2 }
.burger i{ position:absolute; left:9px; right:9px; height:1.5px; background:var(--ivory); transition:transform .4s var(--ease), opacity .3s }
.burger i:nth-child(1){ top:15px } .burger i:nth-child(2){ top:21px } .burger i:nth-child(3){ top:27px }
body.menu-open .burger i:nth-child(1){ transform:translateY(6px) rotate(45deg) }
body.menu-open .burger i:nth-child(2){ opacity:0 }
body.menu-open .burger i:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* Overlay menu (móvil) */
.mobile-menu{
  position:fixed; inset:0; z-index:8000; background:var(--carbon);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:var(--gut);
  transform:translateY(-100%); transition:transform .6s var(--ease); visibility:hidden;
}
body.menu-open .mobile-menu{ transform:translateY(0); visibility:visible }
.mobile-menu a{ font-family:var(--serif); font-size:clamp(1.8rem,7vw,2.6rem); color:var(--ivory-dim); padding:10px 0; border-bottom:1px solid var(--hairline-2) }
.mobile-menu a:hover{ color:var(--accent) }
.mobile-menu .mm-foot{ margin-top:30px; font-family:var(--mono); font-size:.8rem; color:var(--mist); letter-spacing:.06em }
.mobile-menu .mm-foot b{ color:var(--accent) }

/* ============================================================
   Hero · ondas de los dispositivos → logo Futura
   ============================================================ */
#hero{ position:relative; height:100vh; min-height:620px; overflow:hidden;
  background:
    radial-gradient(58% 54% at 50% 42%, rgba(150,132,255,.18), transparent 68%),
    radial-gradient(48% 44% at 82% 14%, rgba(120,150,255,.15), transparent 72%),
    radial-gradient(52% 48% at 14% 86%, rgba(205,145,255,.13), transparent 72%),
    var(--black); }
#hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(38% 34% at 50% 44%, rgba(126,116,240,.12), transparent 70%); }
@supports (height:100dvh){ #hero{ height:100dvh } }
.hero-stage{ position:relative; height:100%; overflow:hidden }

.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1 }

/* Dispositivos emisores */
.hero-nodes{ position:absolute; inset:0; z-index:2 }
.node{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; transition:opacity 1s var(--ease) }
.hero-stage.play .node{ opacity:1 }
.node__ico{ width:clamp(74px,7.6vw,104px); height:clamp(74px,7.6vw,104px); position:relative; overflow:visible;
  transition:transform .5s var(--ease-out) }
/* sombra REDONDA suave detrás del dispositivo (no la silueta cuadrada) */
.node__ico::before{ content:""; position:absolute; left:50%; top:58%; width:76%; height:70%; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(80,95,165,.14) 0%, rgba(80,95,165,.07) 48%, transparent 72%);
  filter:blur(9px); pointer-events:none; }
.node__ico img{ position:relative; width:100%; height:100%; object-fit:contain; display:block;
  -webkit-mask:radial-gradient(circle at 50% 48%, #000 72%, transparent 100%);
  mask:radial-gradient(circle at 50% 48%, #000 72%, transparent 100%) }
.node:hover .node__ico, .node.emit .node__ico{ transform:translateY(-4px) scale(1.06) }
.node__label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--mist); white-space:nowrap; margin-top:2px }

/* Núcleo: el logo real que se forma */
.hero-core{ position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); z-index:3; display:grid; place-items:center }
.hero-flash{ position:absolute; width:min(66vw,640px); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(150,110,250,.5) 0%, rgba(120,90,240,.14) 34%, rgba(120,90,240,0) 66%);
  opacity:0; transform:scale(.3); filter:blur(6px) }
.hero-logo{ position:relative; width:min(42vw,410px); height:auto; opacity:0;
  filter:drop-shadow(0 10px 30px rgba(90,80,200,.18)); transition:opacity 1s ease }
.hero-outline{ position:absolute; inset:0; width:100%; height:100%; opacity:1; overflow:visible;
  filter:drop-shadow(0 0 3px rgba(120,130,255,.55)); transition:opacity .8s ease }
.hero-outline path, .hero-outline ellipse{ fill:none !important }
.hero-stage.filled .hero-logo{ opacity:1 }
.hero-stage.filled .hero-outline{ opacity:0 }
.hero-stage.noanim .hero-outline{ display:none }
.hero-stage.noanim .hero-logo{ opacity:1 }

/* Copy bajo el logo */
.hero-copy{ position:absolute; left:0; right:0; bottom:clamp(18px,2.6vh,42px); z-index:4;
  text-align:center; padding-inline:var(--gut); opacity:0; pointer-events:none }
.hero-stage.formed .hero-copy{ opacity:1; transform:none; transition:opacity 1.1s .15s var(--ease), transform 1.1s .15s var(--ease) }
.hero-copy{ transform:translateY(16px) }
.hero-tagline{ font-family:var(--serif); font-style:italic; font-weight:340; font-size:clamp(1.2rem,2.7vw,2rem); color:var(--ivory) }
.hero-sub{ font-family:var(--mono); font-size:clamp(.6rem,1.1vw,.76rem); letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-top:16px }
.hero-cta{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; pointer-events:auto }

.hero-scrollhint{
  position:absolute; left:50%; bottom:30px; z-index:5; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--mist);
}
.hero-stage.formed .hero-scrollhint{ opacity:1; transition:opacity 1s .4s ease }
.hero-scrollhint .line{ width:1px; height:40px; background:linear-gradient(var(--accent),transparent); position:relative; overflow:hidden }
.hero-scrollhint .line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--accent); animation:scrolldrop 2s var(--ease) infinite }
@keyframes scrolldrop{ 0%{ top:-50% } 60%,100%{ top:100% } }

/* ============================================================
   Reveal utilitario
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out) }
[data-reveal].in{ opacity:1; transform:none }
[data-reveal-delay="1"]{ transition-delay:.08s } [data-reveal-delay="2"]{ transition-delay:.16s }
[data-reveal-delay="3"]{ transition-delay:.24s } [data-reveal-delay="4"]{ transition-delay:.32s }

/* ============================================================
   Sección Intro + Stats
   ============================================================ */
.intro-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(30px,5vw,80px); align-items:end }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px); margin-top:clamp(48px,7vh,90px);
  border-top:1px solid var(--hairline); padding-top:44px }
.stat .num{ font-family:var(--serif); font-size:clamp(2.4rem,5vw,4rem); font-weight:380; color:var(--ivory); line-height:1 }
.stat .num small{ font-size:.45em; color:var(--accent); font-family:var(--sans); vertical-align:top; margin-left:2px }
.stat .lbl{ font-size:.86rem; color:var(--mist); margin-top:12px; max-width:22ch }

/* ============================================================
   Servicios (prioridad absoluta)
   ============================================================ */
.services-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,5vh,64px) }
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.svc{
  position:relative; background:var(--glass); border:1px solid var(--hairline); border-radius:18px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  padding:30px 26px 34px; min-height:260px;
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  transition:background .5s var(--ease), border-color .5s, transform .5s var(--ease-out), box-shadow .5s;
}
.svc__bg{ position:absolute; inset:0; z-index:0; opacity:.32; background-size:cover; background-position:center;
  -webkit-mask:linear-gradient(to bottom, #000 0%, #000 32%, transparent 74%);
  mask:linear-gradient(to bottom, #000 0%, #000 32%, transparent 74%);
  transition:opacity .6s var(--ease), transform 1.2s var(--ease) }
.svc:hover{ background:var(--glass-2); border-color:var(--accent); transform:translateY(-4px); box-shadow:0 16px 40px rgba(80,90,220,.22) }
.svc:hover .svc__bg{ opacity:.5; transform:scale(1.06) }
.svc__num{ position:absolute; top:22px; right:24px; font-family:var(--mono); font-size:.7rem; color:var(--mist-dim); letter-spacing:.1em; z-index:1 }
.svc__ico{ position:relative; z-index:1; width:34px; height:34px; color:var(--accent); margin-bottom:auto }
.svc__body{ position:relative; z-index:1 }
.svc h3{ font-family:var(--sans); font-weight:500; font-size:1.1rem; letter-spacing:.01em; margin-bottom:8px }
.svc p{ font-size:.85rem; color:var(--mist); line-height:1.5 }
.svc__line{ position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent); transition:width .6s var(--ease-out); z-index:1 }
.svc:hover .svc__line{ width:100% }

/* ============================================================
   Bloques editoriales (imagen + texto)
   ============================================================ */
.editorial{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center }
.editorial--rev .editorial__media{ order:2 }
.editorial__media{ position:relative; border-radius:16px; overflow:hidden; background:var(--graphite) }
.editorial__media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2 }
.editorial__media .tag{
  position:absolute; left:18px; bottom:16px; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ivory); background:rgba(255,255,255,.86); backdrop-filter:blur(6px);
  padding:8px 12px; border:1px solid var(--hairline); border-radius:12px;
}
.spec-list{ margin-top:34px; border-top:1px solid var(--hairline) }
.spec{ display:grid; grid-template-columns:auto 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--hairline-2) }
.spec dt{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); align-self:center }
.spec dd{ color:var(--ivory-dim); font-size:.95rem }

/* ============================================================
   Comparador (característica diferencial ENS)
   ============================================================ */
.compare{ position:relative; border-radius:16px; overflow:hidden; user-select:none; aspect-ratio:16/9; background:var(--graphite) }
.compare img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.compare__after{ position:absolute; inset:0; z-index:2; clip-path:inset(0 0 0 50%) }
.compare__grad{ position:absolute; inset:0; pointer-events:none }
.compare__grad--a{ background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.35)) }
.cmp-label{ position:absolute; top:16px; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; padding:7px 12px; background:rgba(255,255,255,.9); border:1px solid var(--hairline); border-radius:12px; z-index:3 }
.cmp-label--l{ left:16px; color:var(--mist) } .cmp-label--r{ right:16px; color:var(--accent) }
.compare__handle{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent); z-index:4; transform:translateX(-1px) }
.compare__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:#ffffff; display:grid; place-items:center; box-shadow:0 0 30px var(--accent-glow); cursor:ew-resize }
.compare__range{ position:absolute; inset:0; z-index:5; opacity:0; cursor:ew-resize; width:100% }

/* ============================================================
   Vista detallada · hotspots
   ============================================================ */
.detail{ position:relative; border-radius:16px; overflow:hidden; background:var(--graphite) }
.detail img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.hotspot{ position:absolute; width:26px; height:26px; z-index:3; transform:translate(-50%,-50%) }
.hotspot button{ width:100%; height:100%; border-radius:50%; border:1px solid var(--accent); position:relative; background:rgba(120,130,255,.12) }
.hotspot button::before{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 var(--accent-glow); animation:ring 2.6s var(--ease) infinite }
.hotspot button i{ position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%; background:var(--accent); transform:translate(-50%,-50%) }
@keyframes ring{ 0%{ box-shadow:0 0 0 0 var(--accent-glow) } 70%,100%{ box-shadow:0 0 0 16px transparent } }
.hotspot__pop{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%) translateY(6px);
  width:220px; background:rgba(255,255,255,.96); border:1px solid var(--hairline); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transition:opacity .35s, transform .35s var(--ease-out); backdrop-filter:blur(8px); z-index:4;
}
.hotspot.open .hotspot__pop, .hotspot:hover .hotspot__pop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.hotspot__pop b{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:5px }
.hotspot__pop p{ font-size:.82rem; color:var(--ivory-dim); line-height:1.45 }

/* ============================================================
   Configurador
   ============================================================ */
.cfg{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:stretch }
.cfg__visual{ position:relative; border-radius:14px; overflow:hidden; background:var(--graphite); min-height:420px }
.cfg__visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .7s var(--ease) }
.cfg__visual img.active{ opacity:1 }
.cfg__visual .cfg__badge{ position:absolute; top:18px; left:18px; z-index:3; font-family:var(--mono); font-size:.64rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); background:rgba(255,255,255,.9); padding:7px 12px; border:1px solid var(--hairline); border-radius:12px }
.cfg__glow{ position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(70% 60% at 50% 60%, transparent 40%, rgba(255,255,255,.5)) }

.cfg__panel{ background:var(--carbon); border:1px solid var(--hairline); border-radius:14px; padding:clamp(24px,3vw,40px); display:flex; flex-direction:column }
.cfg-group{ padding:22px 0; border-bottom:1px solid var(--hairline-2) }
.cfg-group:first-child{ padding-top:0 }
.cfg-group__label{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mist); margin-bottom:14px }
.cfg-group__label b{ color:var(--accent); font-weight:500 }
.chips{ display:flex; flex-wrap:wrap; gap:9px }
.chip{ padding:9px 15px; border:1px solid var(--hairline); border-radius:12px; font-size:.84rem; color:var(--ivory-dim);
  transition:border-color .3s, color .3s, background .3s }
.chip:hover{ border-color:var(--mist) }
.chip[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent) }
.cfg-range{ display:flex; align-items:center; gap:16px }
.cfg-range input[type=range]{ -webkit-appearance:none; appearance:none; flex:1; height:2px; background:var(--hairline); border-radius:12px }
.cfg-range input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent-glow); cursor:pointer }
.cfg-range input[type=range]::-moz-range-thumb{ width:18px; height:18px; border:none; border-radius:50%; background:var(--accent); cursor:pointer }
.cfg-range output{ font-family:var(--mono); font-size:.9rem; color:var(--ivory); min-width:64px; text-align:right }
.cfg-toggle{ display:flex; align-items:center; justify-content:space-between; gap:14px }
.switch{ width:44px; height:24px; border-radius:14px; background:var(--graphite-2); border:1px solid var(--hairline); position:relative; transition:background .35s, border-color .35s; flex:0 0 auto }
.switch i{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--mist); transition:transform .35s var(--ease), background .35s }
.switch[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--accent) }
.switch[aria-pressed="true"] i{ transform:translateX(20px); background:var(--accent) }
.cfg-toggle .t-txt b{ display:block; font-size:.92rem; color:var(--ivory); font-weight:400 }
.cfg-toggle .t-txt span{ font-size:.78rem; color:var(--mist) }

.cfg__total{ margin-top:auto; padding-top:24px; border-top:1px solid var(--hairline); display:flex; align-items:flex-end; justify-content:space-between; gap:20px }
.cfg__price .p{ font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); color:var(--ivory); line-height:1 }
.cfg__price .p small{ font-family:var(--sans); font-size:.9rem; color:var(--mist) }
.cfg__price .u{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); margin-top:8px }

/* ============================================================
   Edición premium (Enterprise · ENS Alto)
   ============================================================ */
.premium{ position:relative; border:1px solid var(--hairline); border-radius:18px; overflow:hidden; background:linear-gradient(160deg,var(--glass-2),var(--glass)) }
.premium__grid{ display:grid; grid-template-columns:.9fr 1.1fr; align-items:stretch }
.premium__media{ position:relative; min-height:520px; overflow:hidden }
.premium__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.premium__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 55%,var(--carbon)) }
.premium__body{ padding:clamp(30px,4vw,64px); display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2 }
.premium__serial{ font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:24px }
.premium__serial span{ padding:5px 10px; border:1px solid var(--hairline); border-radius:12px; color:var(--ivory-dim) }
.premium__benefits{ margin:30px 0; display:grid; gap:2px }
.premium__benefits li{ list-style:none; display:flex; gap:14px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--hairline-2); font-size:.94rem; color:var(--ivory-dim) }
.premium__benefits svg{ flex:0 0 auto; color:var(--accent); margin-top:3px }
.cert{ display:inline-flex; align-items:center; gap:12px; margin-top:6px; padding:12px 16px; border:1px solid var(--hairline); border-radius:16px; background:rgba(120,130,255,.05) }
.cert svg{ color:var(--accent) } .cert b{ font-size:.86rem; color:var(--ivory) } .cert span{ font-size:.74rem; color:var(--mist); display:block }

/* ============================================================
   Formulario
   ============================================================ */
.contact{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(30px,5vw,80px) }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 24px }
.field{ display:flex; flex-direction:column; gap:8px; position:relative }
.field--full{ grid-column:1/-1 }
.field label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist) }
.field label .req{ color:var(--accent) }
.field input, .field select, .field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--hairline);
  padding:12px 2px; font-size:.98rem; color:var(--ivory); transition:border-color .35s; border-radius:0;
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23949aa6' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 4px center }
.field select option{ background:var(--carbon) }
.field textarea{ resize:vertical; min-height:110px }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color:var(--accent) }
.field input::placeholder, .field textarea::placeholder{ color:var(--mist-dim) }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-bottom-color:#e0563f }
.field__err{ font-size:.74rem; color:#e0774f; min-height:1em; opacity:0; transition:opacity .3s }
.field.invalid .field__err{ opacity:1 }
.form-foot{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:6px }
.form-note{ font-size:.78rem; color:var(--mist); max-width:40ch }
.form-success{
  grid-column:1/-1; display:none; align-items:center; gap:16px; padding:20px 24px;
  border:1px solid var(--accent); border-radius:14px; background:rgba(120,130,255,.06);
}
.form-success.show{ display:flex; animation:popin .5s var(--ease-out) }
.form-success svg{ color:var(--accent); flex:0 0 auto }
.form-success b{ color:var(--ivory) } .form-success p{ font-size:.86rem; color:var(--ivory-dim) }
@keyframes popin{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.contact__aside .cc{ display:flex; flex-direction:column; gap:22px; margin-top:34px }
.cc a{ display:flex; align-items:center; gap:14px; color:var(--ivory-dim); font-size:.95rem; transition:color .3s }
.cc a:hover{ color:var(--accent) }
.cc a svg{ color:var(--accent); flex:0 0 auto }

/* ============================================================
   Footer
   ============================================================ */
.footer{ border-top:1px solid var(--hairline); padding-block:clamp(50px,7vh,90px) 40px; background:var(--carbon) }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid var(--hairline-2) }
.footer h4{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mist); margin-bottom:18px }
.footer ul{ list-style:none; display:grid; gap:11px }
.footer ul a{ color:var(--ivory-dim); font-size:.9rem; transition:color .3s } .footer ul a:hover{ color:var(--accent) }
.footer__brand p{ color:var(--mist); font-size:.9rem; max-width:34ch; margin-top:16px }
.ens-badge{ display:inline-flex; align-items:center; gap:12px; margin-top:22px; padding:12px 16px; border:1px solid var(--hairline); border-radius:16px }
.ens-badge svg{ color:var(--accent) } .ens-badge b{ font-size:.82rem; color:var(--ivory) } .ens-badge span{ font-size:.7rem; color:var(--mist); display:block }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:28px; font-size:.8rem; color:var(--mist) }
.footer__bottom a:hover{ color:var(--accent) }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .services-grid{ grid-template-columns:repeat(2,1fr) }
  .footer__top{ grid-template-columns:1fr 1fr }
}
@media (max-width:900px){
  .nav, .header__phone, .header__cta .btn{ display:none }
  .burger{ display:block }
  .intro-grid{ grid-template-columns:1fr; gap:30px }
  .editorial{ grid-template-columns:1fr; gap:34px }
  .editorial--rev .editorial__media{ order:0 }
  .premium__grid{ grid-template-columns:1fr }
  .premium__media{ min-height:300px } .premium__media::after{ background:linear-gradient(0deg,var(--carbon),transparent 60%) }
  .contact{ grid-template-columns:1fr }
  .portal{ grid-template-columns:1fr; gap:26px }
}
@media (max-width:640px){
  :root{ --hdr-h:64px }
  .services-grid{ grid-template-columns:1fr }
  .stats{ grid-template-columns:1fr; gap:26px }
  .form-grid{ grid-template-columns:1fr }
  .footer__top{ grid-template-columns:1fr }
  .portal__links{ grid-template-columns:1fr }
  .hero-tagline{ font-size:1.2rem }
  .node__ico{ width:clamp(74px,21vw,96px); height:clamp(74px,21vw,96px) }
  .node__label{ display:none }
  .hero-logo{ width:70vw }
}

/* ============================================================
   Componentes nuevos
   ============================================================ */
.btn--sm{ padding:11px 18px; font-size:.82rem }
.services-grid{ grid-template-columns:repeat(3,1fr) }
.svc__go{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); opacity:0; transform:translateX(-4px); transition:opacity .4s, transform .4s }
.svc:hover .svc__go{ opacity:1; transform:none }

/* Features de seguridad */
.sec-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:36px }
.sec-feat{ background:var(--glass); border:1px solid var(--hairline); border-radius:16px; -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); padding:24px 26px; transition:border-color .35s, transform .5s var(--ease-out) }
a.sec-feat:hover{ border-color:var(--accent); transform:translateY(-3px) }
.sec-feat b{ display:block; font-size:1rem; color:var(--ivory); margin-bottom:6px }
.sec-feat span{ font-size:.86rem; color:var(--mist) }

/* Área de clientes */
.portal{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,64px); align-items:center;
  border:1px solid var(--hairline); border-radius:18px; padding:clamp(28px,4vw,52px); background:linear-gradient(160deg,var(--glass-2),var(--glass)) }
.portal__links{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }  /* 4 accesos: 2x2 */
.portal-card{ display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--hairline); border-radius:16px;
  background:var(--glass); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); transition:border-color .35s, transform .5s var(--ease-out), background .35s }
.portal-card:hover{ border-color:var(--accent); transform:translateY(-3px); background:var(--glass-2) }
.portal-card b{ font-size:1rem; color:var(--ivory) }
.portal-card span{ font-size:.8rem; color:var(--mist) }

/* Checkbox de privacidad */
.form-check{ display:flex; align-items:flex-start; gap:10px; font-size:.82rem; color:var(--mist); max-width:42ch; cursor:pointer }
.form-check input{ margin-top:3px; accent-color:var(--accent); width:16px; height:16px; flex:0 0 auto }
.form-check a{ color:var(--accent) } .form-check a:hover{ text-decoration:underline }
.field.invalid .form-check span{ color:#e0774f }

/* Footer logo + legal */
.footer__logo{ width:auto; height:44px; display:block }
.footer__legal{ display:flex; gap:18px; flex-wrap:wrap }
.footer__legal a{ color:var(--mist) } .footer__legal a:hover{ color:var(--accent) }

/* Banner de cookies */
.cookie{ position:fixed; left:16px; right:16px; bottom:16px; z-index:9500; max-width:760px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border:1px solid var(--hairline);
  border-radius:16px; padding:16px 20px; box-shadow:var(--shadow-md); transform:translateY(140%); transition:transform .6s var(--ease) }
.cookie.show{ transform:none }
.cookie p{ font-size:.82rem; color:var(--ivory-dim); margin:0 } .cookie p a{ color:var(--accent) }
.cookie__btns{ display:flex; gap:10px; flex:0 0 auto }

/* ============================================================
   Accesibilidad · movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
  .hero-canvas, .hero-outline{ display:none }
  .hero-stage .node, .hero-logo, .hero-copy, .hero-flash{ opacity:1 !important; transform:none !important }
  .hero-logo{ transform:none !important }
  [data-reveal]{ opacity:1; transform:none }
  .svc__go{ opacity:1; transform:none }
}
.reduced .hero-canvas{ display:none !important }
.reduced .node, .reduced .hero-logo, .reduced .hero-copy{ opacity:1 !important; transform:translate(-50%,-50%) !important }
.reduced .hero-logo{ transform:none !important }
.reduced .hero-copy{ transform:none !important }

/* ============================================================
   Sello ENS · Categoría Alta
   ============================================================ */
.ens-seal{ display:inline-flex; align-items:center; gap:16px; margin-top:8px; padding:14px 20px 14px 14px;
  background:#fff; border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.4); text-decoration:none;
  transition:transform .5s var(--ease-out), box-shadow .5s }
.ens-seal:hover{ transform:translateY(-3px); box-shadow:0 18px 44px rgba(0,0,0,.5) }
.ens-seal img{ width:auto; height:78px; display:block }
.ens-seal__txt b{ display:block; font-size:.92rem; color:#12151b; font-weight:500 }
.ens-seal__txt span{ font-size:.74rem; color:#5a616e }
.ens-seal--sm{ margin-top:22px; padding:10px 16px 10px 10px; gap:12px; border-radius:8px }
.ens-seal--sm img{ height:54px }
.ens-seal--sm .ens-seal__txt b{ font-size:.8rem } .ens-seal--sm .ens-seal__txt span{ font-size:.68rem }

/* ============================================================
   Widget flotante · WhatsApp + Chatbot
   ============================================================ */
/* pointer-events:none en el contenedor: su caja es mucho mayor que el botón y
   tapaba los iconos del hero (WiFi, Videovigilancia, Agentes IA) */
.fab{ position:fixed; right:22px; bottom:22px; z-index:9600; display:flex; flex-direction:column; align-items:flex-end; gap:12px; transition:transform .4s var(--ease); pointer-events:none }
.fab__btn, .fab__teaser.show{ pointer-events:auto }
.fab__btn{ width:60px; height:60px; border-radius:50%; background:var(--accent); color:#ffffff; display:grid; place-items:center; position:relative;
  box-shadow:0 12px 30px rgba(120,130,255,.42); transition:transform .4s var(--ease-out), background .3s }
.fab__btn:hover{ transform:scale(1.06); background:var(--accent-br) }
.fab__ic{ position:absolute; display:grid; place-items:center; transition:opacity .3s, transform .3s }
.fab__ic svg{ width:27px; height:27px }
.fab__ic--close{ opacity:0; transform:rotate(-40deg) }
.fab.open .fab__ic--chat{ opacity:0; transform:rotate(40deg) }
.fab.open .fab__ic--close{ opacity:1; transform:none }

.fab__teaser{ position:relative; max-width:252px; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--hairline);
  border-radius:16px 16px 6px 16px; padding:14px 30px 14px 16px; box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity .4s, transform .4s var(--ease-out) }
.fab__teaser.show{ opacity:1; transform:none }
.fab__teaser p{ font-size:.84rem; color:var(--ivory-dim); margin:0; line-height:1.4 }
.fab__teaser-x{ position:absolute; top:6px; right:9px; color:var(--mist); font-size:1.1rem; line-height:1; width:20px; height:20px }
.fab__teaser-x:hover{ color:var(--ivory) }

.fab__panel{ width:min(322px,86vw); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid var(--hairline); border-radius:18px; overflow:hidden;
  box-shadow:0 24px 56px rgba(50,60,140,.20); transform-origin:bottom right;
  opacity:0; transform:translateY(12px) scale(.94); pointer-events:none; transition:opacity .35s, transform .35s var(--ease-out) }
.fab.open .fab__panel{ opacity:1; transform:none; pointer-events:auto }
.fab__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 18px 15px;
  background:linear-gradient(160deg,var(--glass-2),var(--glass)); border-bottom:1px solid var(--hairline-2) }
.fab__head b{ display:block; font-family:var(--serif); font-size:1.18rem; color:var(--ivory); line-height:1.1 }
.fab__head small{ font-size:.72rem; color:var(--mist) }
.fab__close{ color:var(--mist); font-size:1.4rem; line-height:1; flex:0 0 auto } .fab__close:hover{ color:var(--ivory) }
.fab__opt{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--hairline-2); transition:background .3s; width:100%; text-align:left }
.fab__opt:last-child{ border-bottom:none }
.fab__opt:hover{ background:var(--graphite) }
.fab__opt-ic{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:var(--graphite-2); color:var(--accent) }
.fab__opt-ic svg{ width:22px; height:22px }
.fab__opt--wa .fab__opt-ic{ background:#25D366; color:#fff }
.fab__opt-tx b{ display:block; font-size:.92rem; color:var(--ivory); font-weight:400 }
.fab__opt-tx small{ font-size:.76rem; color:var(--mist) }

@media (max-width:700px){
  body.has-cookie .fab{ transform:translateY(-76px) }
}
@media (max-width:640px){
  .fab{ right:14px; bottom:14px } .fab__btn{ width:54px; height:54px }
}

/* Hero WebGL: el logo plano y el fondo grande sólo en fallback */
.hero-stage.noanim .hero-canvas{ display:none }
.reduced .hero-outline, .hero-stage.noanim .hero-outline{ display:none }
.reduced .hero-logo{ opacity:1 !important }

/* ============================================================
   Páginas legales
   ============================================================ */
body.legal-page{ background:var(--carbon) }
.legal-topbar{ position:sticky; top:0; z-index:9000; height:var(--hdr-h); display:flex; align-items:center;
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--hairline) }
.legal-topbar__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); display:flex; align-items:center; justify-content:space-between; gap:20px }
.legal-topbar .logo__img{ height:32px }
.legal-topbar a.back{ font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-dim) }
.legal-topbar a.back:hover{ color:var(--accent) }
.legal{ padding-top:clamp(34px,6vh,72px); padding-bottom:clamp(50px,8vh,110px) }
.legal .wrap{ max-width:840px }
.legal__title{ font-family:var(--serif); font-size:clamp(2rem,5vw,3.2rem); font-weight:380; line-height:1.05; margin-bottom:10px }
.legal__updated{ font-size:.82rem; color:var(--mist); margin-bottom:34px; padding-bottom:26px; border-bottom:1px solid var(--hairline) }
.legal__body{ color:var(--ivory-dim); font-size:1rem; line-height:1.75 }
.legal__body h2{ font-family:var(--sans); font-weight:500; font-size:1.18rem; color:var(--ivory); margin:40px 0 12px; letter-spacing:.005em }
.legal__body h3{ font-weight:500; font-size:1rem; color:var(--ivory); margin:24px 0 8px }
.legal__body p{ margin-bottom:16px }
.legal__body ul{ margin:0 0 20px; padding-left:22px; display:grid; gap:9px }
.legal__body li{ list-style:disc }
.legal__body a{ color:var(--accent) } .legal__body a:hover{ text-decoration:underline }
.legal__body strong{ color:var(--ivory); font-weight:500 }
.legal__data{ background:var(--graphite); border:1px solid var(--hairline); border-radius:6px; padding:18px 22px; margin:0 0 30px }
.legal__data p{ margin:5px 0; font-size:.92rem }
.legal__docs{ list-style:none !important; padding:0 !important; display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:6px; overflow:hidden }
.legal__docs li{ list-style:none !important }
.legal__docs a{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; background:var(--carbon); color:var(--ivory) !important; transition:background .3s }
.legal__docs a:hover{ background:var(--graphite); text-decoration:none !important }
.legal__docs a span{ font-family:var(--mono); font-size:.7rem; color:var(--accent) }

/* ---------- FAQ (preguntas frecuentes) ---------- */
.lnk{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(120,130,255,.35); transition:border-color .25s }
.lnk:hover{ border-bottom-color:var(--accent) }
.faq{ display:grid; gap:14px; max-width:920px }
.faq-item{ border:1px solid var(--hairline); border-radius:14px; background:var(--glass); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); overflow:hidden; transition:border-color .3s var(--ease-out) }
.faq-item[open]{ border-color:rgba(120,130,255,.38) }
.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:18px; padding:22px 26px; font-family:var(--serif); font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ivory); font-weight:400; transition:color .25s }
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{ content:""; flex:0 0 auto; margin-left:auto; width:11px; height:11px; border-right:1.6px solid var(--accent); border-bottom:1.6px solid var(--accent); transform:rotate(45deg); transition:transform .3s var(--ease-out) }
.faq-item[open] summary::after{ transform:rotate(-135deg) }
.faq-item summary:hover{ color:var(--accent-br) }
.faq-item summary:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px }
.faq-item__body{ padding:0 26px 24px; color:var(--ivory-dim); max-width:74ch; line-height:1.72 }
.faq-item__body p{ font-size:.98rem }
.faq-item__body a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(120,130,255,.3) }
.faq-item[open] .faq-item__body{ animation:faqIn .34s var(--ease-out) both }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
@media (max-width:560px){ .faq-item summary{ padding:18px; gap:12px } .faq-item__body{ padding:0 18px 20px } }
@media (prefers-reduced-motion:reduce){ .faq-item summary::after,.faq-item[open] .faq-item__body{ transition:none; animation:none } }

/* ---------- Redes sociales (footer) ---------- */
.footer__social{ display:flex; gap:10px; margin-top:22px }
.footer__social a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--hairline); border-radius:9px; color:var(--mist); transition:color .25s, border-color .25s, transform .25s, background .25s }
.footer__social a:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-soft); transform:translateY(-2px) }
.footer__social svg{ width:17px; height:17px }

/* ---------- WiFi eventos / rodajes (alquiler) ---------- */
.ev-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.ev-card{ background:var(--glass); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border:1px solid var(--hairline); border-radius:16px; padding:26px 22px; transition:border-color .3s var(--ease-out), transform .3s var(--ease-out) }
a.ev-card:hover{ border-color:var(--accent); transform:translateY(-4px) }
.ev-card__ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--accent-soft); color:var(--accent); margin-bottom:18px }
.ev-card__ic svg{ width:24px; height:24px }
.ev-card h3{ font-family:var(--serif); font-size:1.12rem; font-weight:400; margin-bottom:10px; color:var(--ivory) }
.ev-card p{ font-size:.9rem; color:var(--ivory-dim); line-height:1.6 }
.ev-card strong{ color:var(--ivory); font-weight:500 }
.ev-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px }
.ev-tags li{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--mist); border:1px solid var(--hairline); border-radius:100px; padding:8px 15px }
@media (max-width:960px){ .ev-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .ev-grid{ grid-template-columns:1fr } }

/* ---------- Ajustes tema claro: sombras suaves de tarjeta ---------- */
.svc,.ev-card,.sec-feat,.portal-card,.faq-item,.portal,.premium,.compare,.editorial__media,.detail{ box-shadow:var(--shadow-sm) }
.svc:hover,.ev-card:hover,.sec-feat:hover,.portal-card:hover{ box-shadow:var(--shadow-md) }
.fab__panel,.fab__teaser{ box-shadow:var(--shadow-md) }
.header.scrolled .nav a{ color:var(--ivory-dim) }
/* el logo de dispositivos del hero: marco claro sutil sobre fondo claro */
/* iconos de dispositivos: foto grande, sin marco, bordes difuminados */
.node__ico{ background:none; box-shadow:none; border:none }

.hero-scrollhint{ display:none !important }

/* ---------- Partners tecnológicos ---------- */
/* Seis tarjetas: en 3 columnas salen dos filas llenas. Con 5 columnas la sexta
   quedaba descolgada ella sola. */
.partners-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.partner{ background:var(--glass); border:1px solid var(--hairline); border-radius:18px; padding:24px 20px 22px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--shadow-sm);
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s }
a.partner:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow-md) }
.partner__logo{ height:44px; display:flex; align-items:center; margin-bottom:18px }
.partner__logo img{ max-height:38px; width:auto; object-fit:contain }
.partner__wordmark{ font-family:var(--sans); font-weight:500; font-size:1.32rem; letter-spacing:-.015em;
  background:var(--accent-grad); -webkit-background-clip:text; background-clip:text; color:transparent }
.partner h3{ font-family:var(--sans); font-weight:500; font-size:.98rem; color:var(--ivory); margin-bottom:9px }
/* Citelia no es un partner ajeno sino la marca propia como operador: el rótulo
   lo dice sin tener que meterlo en el titular. */
.partner__rol{ font-family:var(--mono); font-size:.64rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); margin:-4px 0 10px }
.partner p{ font-size:.85rem; color:var(--ivory-dim); line-height:1.6 }
.partner strong{ color:var(--ivory); font-weight:500 }
.partner__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin-top:16px }
.partner__tags li{ font-family:var(--mono); font-size:.64rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mist); border:1px solid var(--hairline); border-radius:100px; padding:5px 10px }
@media (max-width:1240px){ .partners-grid{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:860px){ .partners-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .partners-grid{ grid-template-columns:1fr } }

/* ---------- Muro de carteles de rodajes ----------
   Los carteles son la credencial: se ven completos (contain), no recortados,
   sobre una caja 2:3 uniforme para que la rejilla no baile con las distintas
   proporciones de cada cartel. */
.posters{ margin-top:clamp(30px,4vh,46px) }
.posters__head{ margin-bottom:20px }
.posters__head h3{ font-family:var(--sans); font-weight:500; font-size:1.05rem; color:var(--ivory); margin-bottom:6px }
.posters__head p{ font-size:.88rem; max-width:60ch }
/* Una sola fila que va pasando sola y que además se puede arrastrar. El
   movimiento lo lleva js/carrusel.js con scrollLeft —no con una animación CSS—
   justo para que el dedo y el trackpad puedan moverla sin pelearse con ella.
   La lista va DUPLICADA en el HTML: al pasar de la mitad se resta media
   anchura y el bucle no da salto. */
.posters{ position:relative }
.posters__marquee{ overflow-x:auto; overflow-y:hidden; cursor:grab;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain; touch-action:pan-x pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 94%,transparent 100%) }
.posters__marquee::-webkit-scrollbar{ display:none }
.posters__marquee.arrastrando{ cursor:grabbing }
.posters__marquee.arrastrando img{ pointer-events:none }
.posters__track{ display:flex; gap:14px; width:max-content }
.poster{ margin:0; flex:0 0 150px }
.poster img{ -webkit-user-drag:none; user-select:none }

/* Flechas: la pista se mueve sola, así que hay que decirle al visitante que
   también puede moverla él. */
.posters__nav{ position:absolute; top:calc(50% + 14px); transform:translateY(-50%);
  z-index:2; width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:1.5rem; line-height:1; padding-bottom:3px;
  color:var(--ivory); background:var(--glass-2); border:1px solid var(--hairline);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:var(--shadow-sm);
  transition:border-color .25s var(--ease-out), color .25s var(--ease-out) }
.posters__nav:hover{ border-color:var(--accent); color:var(--accent) }
.posters__nav:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.posters__nav--prev{ left:2px }
.posters__nav--next{ right:2px }
@media (max-width:560px){
  .poster{ flex-basis:118px }
  .posters__nav{ display:none }   /* en el móvil se desliza con el dedo */
}
/* height:auto es obligatorio: el atributo height del <img> fija la altura y
   dejaría sin efecto el aspect-ratio, con bandas enormes bajo cada cartel. */
.poster img{ width:100%; height:auto; aspect-ratio:2/3; object-fit:cover; object-position:top center;
  background:var(--graphite); border:1px solid var(--hairline); border-radius:12px; display:block;
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s }
.poster:hover img{ box-shadow:var(--shadow-md) }
.poster:hover img{ border-color:var(--accent); transform:translateY(-3px) }
.poster figcaption{ font-size:.72rem; color:var(--ivory-dim); line-height:1.35; margin-top:8px }

/* ---------- Landings de servicio ---------- */
.lp{ padding-top:var(--hdr-h) }
.lp-hero{ padding-block:clamp(40px,6vh,80px) clamp(30px,4vh,54px) }
.crumbs{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mist) }
.crumbs a{ color:var(--mist) } .crumbs a:hover{ color:var(--accent) }
.crumbs span[aria-hidden]{ margin:0 .5em; opacity:.5 }
.lp .ev-card h3{ font-size:1.05rem }
.lp-related{ list-style:none; display:flex; flex-wrap:wrap; gap:12px }
.lp-related a{ display:inline-flex; align-items:center; gap:.5em; padding:12px 20px; border:1px solid var(--hairline);
  border-radius:100px; background:var(--glass); font-size:.9rem; color:var(--ivory-dim);
  transition:border-color .3s, color .3s, transform .3s var(--ease-out) }
.lp-related a::after{ content:"→"; opacity:.5; transition:transform .3s var(--ease-out) }
.lp-related a:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px) }
.lp-related a:hover::after{ transform:translateX(3px) }
.lp-cta{ text-align:center; border:1px solid var(--hairline); border-radius:20px; background:var(--glass);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--shadow-sm);
  padding:clamp(34px,5vw,60px) clamp(20px,4vw,50px); max-width:var(--maxw) }
.lp-cta .hero-cta{ justify-content:center }

/* ---------- Nav con submenús ---------- */
.nav__item{ position:relative; display:flex; align-items:center }
.nav__item > a{ display:inline-flex; align-items:center; gap:.45em }
.nav__caret{ width:6px; height:6px; border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-1px); opacity:.55; transition:transform .3s var(--ease-out), opacity .3s }
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret{ opacity:1; transform:rotate(225deg) translateY(-3px) }
.subnav{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:250px; padding:10px; display:grid; gap:1px;
  background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid var(--hairline); border-radius:16px; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s;
  z-index:60;
}
.nav__item:hover .subnav, .nav__item:focus-within .subnav{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) }
.subnav::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px }
.subnav a{ display:block; padding:10px 14px; border-radius:10px; font-size:.92rem; color:var(--ivory-dim);
  white-space:nowrap; transition:background .22s, color .22s }
.subnav a:hover{ background:var(--accent-soft); color:var(--accent) }
.subnav a::after{ display:none }
@media (max-width:900px){ .subnav{ display:none } }
.mobile-menu{ justify-content:flex-start; overflow-y:auto; padding-top:calc(var(--hdr-h) + 16px); padding-bottom:30px; gap:2px }
.mobile-menu a{ font-size:clamp(1.05rem,4.2vw,1.35rem); padding:11px 0 }
.mm-head{ font-family:var(--mono); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent); margin-top:20px; padding-bottom:6px }
.mm-head:first-child{ margin-top:0 }

/* ---------- Páginas de condiciones generales ---------- */
.doc-actions{ margin:0 0 34px }
.legal-page .legal__body h2{ font-size:1.06rem; margin:34px 0 10px; padding-top:20px; border-top:1px solid var(--hairline-2) }
.legal-page .legal__body h2:first-child{ border-top:none; padding-top:0; margin-top:0 }
.legal-page .legal__body p{ text-align:justify; hyphens:auto }
.doc-more{ margin-top:60px; padding-top:34px; border-top:1px solid var(--hairline) }
.doc-more h2{ font-family:var(--sans); font-weight:500; font-size:1.05rem; color:var(--ivory); margin-bottom:16px }


/* ---------- Tarjetas clicables: que se note que llevan a algún sitio ---------- */
a.ev-card, a.partner, a.sec-feat{ display:block; cursor:pointer; color:inherit }
a.ev-card:hover h3, a.partner:hover h3, a.sec-feat:hover b{ color:var(--accent) }
a.ev-card:focus-visible, a.partner:focus-visible, a.sec-feat:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
/* las informativas (no enlaces) no deben parecer pulsables */
.ev-card:not(a), .sec-feat:not(a){ cursor:default }

/* enlace destacado a la tienda online */
.header__shop{ display:inline-flex; align-items:center; gap:.5em; font-size:.95rem; font-weight:500;
  color:var(--accent); padding:9px 16px; border:1px solid var(--accent); border-radius:100px;
  transition:background .3s, color .3s, transform .3s var(--ease-out) }
.header__shop:hover{ background:var(--accent); color:#fff; transform:translateY(-2px) }
.header__shop svg{ width:16px; height:16px }
@media (max-width:1180px){ .header__shop span{ display:none } .header__shop{ padding:9px 12px } }

/* los iconos del hero son enlaces a su servicio */
a.node{ color:inherit; text-decoration:none; cursor:pointer }
a.node:hover .node__label{ color:var(--accent) }
a.node:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:14px }
@media (max-width:640px){ .node__ico{ width:clamp(58px,15vw,76px); height:clamp(58px,15vw,76px) } }

/* ============ Vuelo hacia el dispositivo (estilo Google Earth) ============
   UNA sola animación continua de 1,25 s, sin cortes ni tirones:
     0 → 14%   se eleva y despega del sitio (aún de canto)
    14 → 46%   gira sobre su eje Y hasta quedar de frente, ya viajando al centro
    46 → 100%  se acerca acelerando; al pasar del tamaño nativo el JS ha
               cambiado ya la imagen por la versión HD, así que se gana
               definición en vez de perderla.                              */
.zoomer{ position:fixed; inset:0; z-index:9999; pointer-events:none }
.zoomer__veil{ position:absolute; inset:0; background:var(--black); opacity:0;
  transition:opacity .62s cubic-bezier(.35,0,.25,1) }
.zoomer.is-on .zoomer__veil{ opacity:1 }

/* la luz que sale del propio equipo, hacia la que vamos entrando */
.zoomer__glow{ position:absolute; left:50%; top:50%; width:56vmin; height:56vmin; margin:-28vmin 0 0 -28vmin;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(122,134,255,.34) 0%, rgba(154,92,255,.14) 44%, rgba(154,92,255,0) 72%);
  opacity:0; transform:scale(.22);
  transition:opacity .7s ease .15s, transform 1.4s cubic-bezier(.42,0,.5,1) }
.zoomer.is-on .zoomer__glow{ opacity:1; transform:scale(1.5) }

/* El pivote lleva SÓLO la trayectoria (desplazamiento + acercamiento) */
.zoomer__pivot{ position:absolute; transform-origin:50% 50%; will-change:transform,opacity }
.zoomer.is-on .zoomer__pivot{ animation:fspFly 1.4s linear both }

/* Del 52% en adelante el desplazamiento deja de centrar la imagen y pasa a
   centrar el PUNTO de destino (--dx4/--dy4), así el acercamiento se mete por
   ahí en vez de crecer plano desde el centro. */
@keyframes fspFly{
  0%   { transform:translate3d(0,0,0) scale(1); opacity:1 }
  12%  { transform:translate3d(0, var(--lift), 0) scale(var(--s1)) }
  30%  { transform:translate3d(calc(var(--dx) * .26), calc(var(--dy) * .26 + var(--lift) * .5), 0)
                   scale(var(--s2)) }
  52%  { transform:translate3d(var(--dx), var(--dy), 0) scale(var(--s3)); opacity:1 }
  86%  { transform:translate3d(var(--dx86), var(--dy86), 0) scale(var(--s86)); opacity:1 }
  100% { transform:translate3d(var(--dx4), var(--dy4), 0) scale(var(--s4)); opacity:0 }
}

/* SIN giro. Al pulsar, la vista de tres cuartos se funde con la frontal en los
   primeros 270 ms y a partir de ahí el equipo va de frente todo el vuelo. Nada
   de rotaciones: el cambio de punto de vista es sólo el relevo de las dos
   texturas, que es lo que se pidió. */
.zoomer__flip{ position:absolute; inset:0 }

.zoomer__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  will-change:opacity;
  -webkit-mask:none; mask:none;   /* fuera el difuminado: aquí se ve el equipo entero */
  filter:drop-shadow(0 30px 72px rgba(50,60,150,.28)) }
.zoomer__img--front{ opacity:0 }

.zoomer.has-front.is-on .zoomer__img--iso{ animation:fspFadeIso 1.4s linear both }
.zoomer.has-front.is-on .zoomer__img--front{ animation:fspFadeFront 1.4s linear both }
@keyframes fspFadeIso{   0%{opacity:1}  5%{opacity:1} 24%{opacity:0} 100%{opacity:0} }
@keyframes fspFadeFront{ 0%{opacity:0}  5%{opacity:0} 24%{opacity:1} 100%{opacity:1} }

/* Nada de tercer nivel de detalle: un primer plano generado aparte NO está
   alineado con la imagen ancha (otro encuadre, otro ángulo), así que el relevo
   siempre se ve como un salto. Las teselas de un mapa cuadran porque son
   recortes de la misma fuente; dos renders independientes, no. */

.zoomer__label{ position:absolute; left:0; right:0; bottom:9vh; text-align:center;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); opacity:0 }
.zoomer.is-on .zoomer__label{ animation:fspZoomCap 1.4s ease both }
@keyframes fspZoomCap{ 0%{opacity:0} 22%{opacity:1} 66%{opacity:1} 84%{opacity:0} 100%{opacity:0} }

html.is-zooming{ overflow:hidden }
html.is-zooming body>*:not(.zoomer){ transition:opacity .42s ease, filter .42s ease;
  opacity:0; filter:blur(7px) }

/* al llegar a la landing salimos «desde dentro»: la página aparece muy cerca y
   desenfocada y retrocede hasta su sitio, continuando el vuelo del icono */
@media (prefers-reduced-motion:no-preference){
  html.page-in main.lp,
  html.page-in .header{ animation:fspPageIn .66s cubic-bezier(.2,.86,.3,1) both }
  html.page-in .header{ animation-delay:.08s }
  @keyframes fspPageIn{
    from{ opacity:0; transform:scale(1.11); filter:blur(9px) }
    60% { opacity:1 }
    to  { opacity:1; transform:none; filter:blur(0) }
  }
}

/* barra superior de las páginas legales: tienda + volver */
.legal-topbar__nav{ display:flex; align-items:center; gap:22px }
.legal-topbar__nav a{ font-size:.86rem; color:var(--mist); transition:color .25s }
.legal-topbar__nav a:hover{ color:var(--accent) }

/* campo trampa del formulario: fuera de la vista pero accesible al robot */
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* horario de atención bajo los datos de contacto */
.cc__horario{ margin-top:16px; font-size:.85rem; color:var(--mist); line-height:1.5 }