/* =========================================================================
   NEXILO — Hoja de estilos
   Paleta: azul oscuro profundo + VERDE MANZANA neón + cian tecnológico
   ========================================================================= */

:root{
  /* Azules */
  --azul-950:#03070f;
  --azul-900:#050b1a;
  --azul-850:#071129;
  --azul-800:#0a1735;
  --azul-700:#0e2149;
  --azul-600:#14305f;

  /* Verde manzana neón  ← si quieres ajustar el tono, cambia estos 4
     (y NEON en assets/js/data.js para que las ilustraciones combinen) */
  --neon:#9dff3c;
  --neon-soft:#caff92;
  --neon-deep:#5fc900;
  --neon-glow:rgba(157,255,60,.45);

  /* Cian de apoyo */
  --cian:#7fe9ff;

  /* Texto */
  --txt:#dbe7f5;
  --txt-dim:#93a8c4;

  /* Superficies */
  --card:rgba(10,23,53,.72);
  --card-2:rgba(7,17,41,.9);
  --line:rgba(157,255,60,.18);
  --line-soft:rgba(127,233,255,.12);

  --radius:16px;
  --radius-lg:22px;
  --wrap:1180px;

  --font-head:'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
  --shadow-neon:0 0 0 1px rgba(157,255,60,.28), 0 18px 50px -18px rgba(157,255,60,.35);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--txt);
  background:var(--azul-900);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg{max-width:100%}
a{color:var(--neon); text-decoration:none}
a:hover{color:var(--neon-soft)}

h1,h2,h3,h4{font-family:var(--font-head); letter-spacing:.01em}
h2,h3{color:var(--neon); margin:0 0 .5em}

::selection{background:var(--neon); color:var(--azul-950)}
:focus-visible{outline:2px solid var(--neon); outline-offset:3px; border-radius:6px}

.skip-link{position:absolute; left:-999px; top:0; z-index:200; background:var(--neon); color:var(--azul-950); padding:.6rem 1rem; font-weight:600}
.skip-link:focus{left:8px; top:8px}

.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}

/* =========================================================================
   BANNER
   ========================================================================= */
.banner{
  position:relative; z-index:1; min-height:100svh; padding-top:74px;
  display:flex; flex-direction:column; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, var(--azul-700) 0%, transparent 55%),
    radial-gradient(90% 80% at 12% 92%, #0b2b4d 0%, transparent 60%),
    linear-gradient(170deg, var(--azul-900) 0%, var(--azul-950) 100%);
}
.banner--page{min-height:auto}

.banner__bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.banner__bg canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

.banner__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(127,233,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,233,255,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(110% 80% at 50% 30%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(110% 80% at 50% 30%, #000 25%, transparent 78%);
}

.banner__glow{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.banner__glow--a{width:52vw; height:52vw; right:-12vw; top:-16vw; background:radial-gradient(circle, rgba(157,255,60,.28), transparent 68%)}
.banner__glow--b{width:44vw; height:44vw; left:-14vw; bottom:-18vw; background:radial-gradient(circle, rgba(43,140,255,.34), transparent 70%)}

.banner__scan{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(157,255,60,.055) 48%, transparent 52%);
  background-size:100% 220%; animation:scan 9s linear infinite; mix-blend-mode:screen;
}
@keyframes scan{ from{background-position:0 -110%} to{background-position:0 110%} }

.banner__vignette{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(3,7,15,.55) 0%, transparent 22%, transparent 62%, var(--azul-900) 100%);
}

/* Arte fantasma del servicio (al pasar el mouse por el menú) */
.banner__art{
  position:absolute; right:-4%; top:6%;
  width:min(62vw, 820px); aspect-ratio:800/420;
  opacity:0; transform:scale(1.04) translateY(14px);
  transition:opacity .55s ease, transform .8s cubic-bezier(.2,.7,.2,1);
  mask-image:radial-gradient(70% 70% at 60% 45%, #000 30%, transparent 76%);
  -webkit-mask-image:radial-gradient(70% 70% at 60% 45%, #000 30%, transparent 76%);
  mix-blend-mode:screen;
}
.banner__art.is-on{opacity:.34; transform:scale(1) translateY(0)}
.banner__art svg{width:100%; height:100%}
.banner__art .art__tag,.banner__art .art__lbl,.banner__art .art__lbl2{display:none}

@media (prefers-reduced-motion:reduce){ .banner__scan{animation:none} .banner__art{transition:none} }

/* ---------- Barra superior ----------
   Fija (no sticky): así se mantiene visible en toda la página, no solo
   mientras se ve el banner. El padding-top que se le suma a .banner
   compensa el espacio que el header deja de ocupar en el flujo normal. */
.topbar{position:fixed; top:0; left:0; right:0; width:100%; z-index:80; transition:background .3s, backdrop-filter .3s, border-color .3s; border-bottom:1px solid transparent}
.topbar.is-stuck{
  background:rgba(5,11,26,.88);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
}
.topbar__inner{width:min(100% - 2.5rem, 1320px); margin-inline:auto; display:flex; align-items:center; gap:1.5rem; min-height:74px; padding-top:1.5rem}

/* Lockup de marca: "Ne" + monograma X + "ilo", con la bajada GLOBAL TECH.
   El monograma reemplaza a la letra X dentro de la palabra, como en el logo
   original. El nombre accesible del enlace lo da su aria-label. */
.brand{display:inline-flex; align-items:center; color:var(--neon); flex:none}
.brand__lockup{display:flex; flex-direction:column; gap:.14rem}
.brand__word{
  display:inline-flex; align-items:center; line-height:1;
  font-family:var(--font-body); font-weight:300; font-size:1.5rem; letter-spacing:.015em;
  color:#f2fee7;
}
.brand__x{
  width:1.85em; height:1.85em; margin:0 -.34em; flex:none;
  color:var(--neon); filter:drop-shadow(0 0 9px var(--neon-glow));
  overflow:visible;
}
.brand__tag{
  display:flex; align-items:center; justify-content:flex-end; gap:.5rem;
  font-family:var(--font-head); font-weight:600; font-size:.53rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--txt-dim);
  padding-right:.1em;
}
.brand__tag i{flex:1; min-width:20px; height:1px; background:currentColor; opacity:.55}

/* ---------- Navegación ---------- */
.nav{margin-left:auto}
.nav__list{display:flex; align-items:center; gap:.1rem; list-style:none; margin:0; padding:0}
.nav__item{position:relative}

.nav__link,.nav__toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  font:600 .89rem/1 var(--font-head); letter-spacing:.05em; text-transform:uppercase;
  color:var(--neon); background:none; border:0; cursor:pointer;
  padding:.75rem .8rem; border-radius:10px;
  transition:color .2s, background .2s, text-shadow .2s;
}
.nav__link:hover,.nav__toggle:hover,.nav__item.is-open>.nav__toggle{
  color:#f2fee7; background:rgba(157,255,60,.1); text-shadow:0 0 14px var(--neon-glow);
}
.nav__toggle svg{width:12px; height:12px; transition:transform .25s; opacity:.8}
.nav__item.is-open>.nav__toggle svg{transform:rotate(180deg)}

.nav__link--cta{border:1px solid var(--neon); background:rgba(157,255,60,.09); box-shadow:0 0 20px -6px var(--neon-glow); margin-left:.4rem}
.nav__link--cta:hover{background:var(--neon); color:var(--azul-950); text-shadow:none}

/* ---------- Desplegable nivel 1: las 3 categorías ---------- */
.drop{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:320px; padding:.6rem;
  background:linear-gradient(160deg, rgba(10,23,53,.98), rgba(5,11,26,.99));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow), 0 0 0 1px rgba(0,0,0,.4);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s, transform .22s, visibility .22s;
  list-style:none; margin:0; z-index:90;
}
.nav__item.is-open>.drop{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.drop::before{
  content:''; position:absolute; top:-6px; left:50%; width:12px; height:12px;
  transform:translateX(-50%) rotate(45deg);
  background:rgba(10,23,53,.99); border-left:1px solid var(--line); border-top:1px solid var(--line);
}
.drop__blurb{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--txt-dim);
  padding:.3rem .75rem .5rem; margin:0 0 .35rem; border-bottom:1px dashed var(--line);
}
.drop__item{position:relative}

.drop__row{display:flex; align-items:stretch; border-radius:11px; overflow:hidden; transition:background .18s}
.drop__row:hover,.drop__item.is-open .drop__row{background:rgba(157,255,60,.11)}
.drop__cat{
  flex:1; min-width:0; display:flex; align-items:center; gap:.65rem;
  padding:.65rem .75rem; color:var(--txt); font-size:.94rem; font-weight:500; line-height:1.25;
}
.drop__cat b{display:block; font-family:var(--font-head); font-weight:600; color:var(--neon); font-size:.96rem}
.drop__cat small{display:block; font-size:.75rem; color:var(--txt-dim)}
.drop__row:hover .drop__cat b{color:var(--neon-soft)}
.drop__cat i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 10px var(--neon-glow); opacity:.75}

.drop__expand{
  flex:none; width:38px; border:0; border-left:1px solid var(--line-soft);
  background:none; color:var(--neon); cursor:pointer; display:grid; place-items:center;
}
.drop__expand svg{width:14px; height:14px; transition:transform .25s}
.drop__item.is-open .drop__expand svg{transform:rotate(90deg)}
.drop__expand:hover{background:rgba(157,255,60,.14)}

/* ---------- Desplegable nivel 2: los servicios ---------- */
/* Se abre hacia la IZQUIERDA: el menú vive en el borde derecho de la barra */
.drop__sub{
  position:absolute; top:-.6rem; right:calc(100% + .6rem);
  width:290px; padding:.55rem; list-style:none; margin:0;
  background:linear-gradient(160deg, rgba(11,26,60,.99), rgba(5,11,26,.99));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; pointer-events:none; transform:translateX(8px);
  transition:opacity .2s, transform .2s, visibility .2s; z-index:95;
}
.drop__item.is-open>.drop__sub{opacity:1; visibility:visible; pointer-events:auto; transform:none}
.drop__link{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border-radius:9px;
  color:var(--txt); font-size:.9rem; font-weight:500;
  transition:background .18s, color .18s, transform .18s;
}
.drop__link:hover,.drop__link:focus-visible{background:rgba(157,255,60,.12); color:var(--neon); transform:translateX(3px)}
.drop__link i{flex:none; width:6px; height:6px; border-radius:50%; background:var(--neon); box-shadow:0 0 8px var(--neon-glow); opacity:.7}
.drop__link:hover i{opacity:1}

/* Puentes invisibles: sin ellos, el pequeño hueco entre el botón y el
   desplegable (y entre cada categoría y su submenú) dispara mouseleave
   antes de que el cursor llegue al menú, y este se cierra solo. */
@media (min-width:1201px){
  .nav__item--drop::after{
    content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
    width:320px; height:10px;
  }
  .drop__item::before{
    content:''; position:absolute; top:0; bottom:0; right:100%; width:.6rem;
  }
}

/* Hamburguesa */
.burger{display:none; flex-direction:column; gap:5px; background:none; border:1px solid var(--line); border-radius:10px; padding:.6rem; cursor:pointer; margin-left:auto}
.burger span{display:block; width:22px; height:2px; background:var(--neon); border-radius:2px; transition:transform .25s, opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Contenido del banner ---------- */
.hero{
  flex:1; width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.5rem,7vh,6rem) 0 5rem;
  max-width:min(100% - 2.5rem, 980px); margin-right:auto;
}
.hero--page{padding:clamp(2rem,6vh,4rem) 0 clamp(2.5rem,6vh,4rem)}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font:600 .78rem/1 var(--font-head); letter-spacing:.22em; text-transform:uppercase;
  color:var(--neon); margin:0 0 1.4rem; padding:.5rem .9rem;
  border:1px solid var(--line); border-radius:999px; background:rgba(157,255,60,.06); width:max-content; max-width:100%;
}
.dot-live{width:8px; height:8px; border-radius:50%; background:var(--neon); box-shadow:0 0 0 0 var(--neon-glow); animation:pulse 2.2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(157,255,60,.6)}
  70%{box-shadow:0 0 0 12px rgba(157,255,60,0)}
  100%{box-shadow:0 0 0 0 rgba(157,255,60,0)}
}
.hero__title{font-size:clamp(2.1rem,6vw,4.15rem); line-height:1.05; font-weight:700; margin:0 0 1.3rem; color:#f4fff0; text-shadow:0 0 60px rgba(157,255,60,.18)}
.hero--page .hero__title{font-size:clamp(1.9rem,4.6vw,3.1rem)}
.hero__title-accent{color:var(--neon); text-shadow:0 0 34px var(--neon-glow), 0 0 90px rgba(157,255,60,.25)}
.hero__lead{font-size:clamp(1rem,1.6vw,1.16rem); color:var(--txt); max-width:64ch; margin:0 0 2.2rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:3rem}
.hero--page .hero__actions{margin-bottom:0}

.hero__stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:1px; margin:0;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; max-width:720px;
}
.hero__stats>div{background:rgba(5,11,26,.55); padding:1rem 1.2rem; backdrop-filter:blur(6px); text-align:center}
.hero__stats dt{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-dim)}
.hero__stats dd{margin:.25rem 0 0; font:700 1.35rem/1 var(--font-head); color:var(--neon)}

.crumb{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; font-size:.82rem; color:var(--txt-dim); margin:0 0 1.4rem; padding:0; list-style:none}
.crumb a{color:var(--txt-dim)}
.crumb a:hover{color:var(--neon)}
.crumb li+li::before{content:'›'; margin-right:.5rem; opacity:.6}
.crumb [aria-current]{color:var(--neon)}

.banner__hint{
  position:absolute; bottom:1.1rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font:600 .68rem/1 var(--font-head); letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim); opacity:.75;
}
.banner__hint svg{width:20px; height:20px; animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){ .banner__hint svg{animation:none} .dot-live{animation:none} }

/* =========================================================================
   BOTONES
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.88rem 1.7rem; border-radius:12px; border:1px solid transparent;
  font:600 .95rem/1 var(--font-head); letter-spacing:.06em; text-transform:uppercase;
  cursor:pointer; transition:transform .18s, box-shadow .25s, background .2s, color .2s; text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{
  background:linear-gradient(135deg, var(--neon), var(--neon-deep)); color:#0b1a02;
  box-shadow:0 10px 34px -10px var(--neon-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover{color:#0b1a02; box-shadow:0 16px 44px -10px var(--neon-glow)}
.btn--ghost{border-color:var(--neon); color:var(--neon); background:rgba(157,255,60,.07)}
.btn--ghost:hover{background:rgba(157,255,60,.16); color:var(--neon-soft)}
.btn--sm{padding:.6rem 1.05rem; font-size:.79rem}
.btn--block{width:100%}
.btn__icon{width:19px; height:19px; flex:none}

/* =========================================================================
   SECCIONES
   ========================================================================= */
.section{position:relative; padding:clamp(3.5rem,8vw,7rem) 0}
.section--alt{background:radial-gradient(80% 60% at 85% 0%, rgba(20,48,95,.55), transparent 60%), var(--azul-950); border-block:1px solid var(--line-soft)}
.section__head{max-width:760px; margin-bottom:3rem}
.section__eyebrow{font:600 .76rem/1 var(--font-head); letter-spacing:.24em; text-transform:uppercase; color:var(--cian); margin:0 0 .8rem}
.section__title{font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.15; margin:0 0 .8rem; color:var(--neon)}
.section__lead{color:var(--txt-dim); font-size:1.04rem; margin:0}

.prose{max-width:74ch}
.prose p{margin:0 0 1.1rem; color:var(--txt)}
.prose strong{color:#f2fee7}
.prose em{color:var(--cian); font-style:normal}

/* ---------- Tarjetas de categoría (home) ---------- */
.cats{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit, minmax(300px,1fr))}
.cat{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(165deg, var(--card), var(--card-2));
  border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.cat:hover{transform:translateY(-6px); border-color:rgba(157,255,60,.5); box-shadow:var(--shadow-neon)}
.cat__media{aspect-ratio:16/9; overflow:hidden; border-bottom:1px solid var(--line-soft)}
.cat__media svg{width:100%; height:100%; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cat:hover .cat__media svg{transform:scale(1.05)}
.cat__body{padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1}
.cat__num{font:700 .72rem/1 var(--font-head); letter-spacing:.2em; color:var(--cian); margin:0 0 .5rem}
.cat__title{font-size:1.22rem; margin:0 0 .5rem; color:var(--neon)}
.cat__text{font-size:.93rem; color:var(--txt-dim); margin:0 0 1.1rem}
.cat__list{list-style:none; padding:0; margin:0 0 1.3rem; display:grid; gap:.35rem; flex:1}
.cat__list a{display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--txt); transition:color .18s, padding-left .18s}
.cat__list a::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--neon); opacity:.6; flex:none}
.cat__list a:hover{color:var(--neon); padding-left:3px}
.cat__cta{display:inline-flex; align-items:center; gap:.5rem; font:600 .8rem/1 var(--font-head); letter-spacing:.11em; text-transform:uppercase; color:var(--neon); align-self:flex-start}
.cat__cta svg{width:15px; height:15px; transition:transform .25s}
.cat:hover .cat__cta svg{transform:translateX(4px)}

/* =========================================================================
   TARJETAS QUE SE VOLTEAN (páginas de categoría)
   El volteo se dispara automáticamente al pasar el mouse (hover) en
   dispositivos con puntero fino; en touch (sin hover) se mantiene el click,
   porque ahí no existe el hover y si no, no habría forma de ver el reverso.
   ========================================================================= */
.flips{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill, minmax(320px,1fr))}

.flip{perspective:1600px; height:470px; scroll-margin-top:110px}
.flip__inner{position:relative; width:100%; height:100%; transition:transform .7s cubic-bezier(.3,.8,.25,1); transform-style:preserve-3d}
.flip.is-flipped .flip__inner{transform:rotateY(180deg)}
@media (hover:hover) and (pointer:fine){
  .flip:hover .flip__inner, .flip:focus-within .flip__inner{transform:rotateY(180deg)}
}
@media (prefers-reduced-motion:reduce){ .flip__inner{transition:none} }

.flip__face{
  position:absolute; inset:0; border-radius:var(--radius-lg); overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:linear-gradient(165deg, var(--card), var(--card-2));
  border:1px solid var(--line-soft);
  display:flex; flex-direction:column;
}

/* Cara frontal: es un botón (click sigue funcionando, útil en touch) */
.flip__front{
  padding:0; text-align:left; color:inherit; font:inherit; cursor:pointer;
  transition:border-color .3s, box-shadow .3s;
}
.flip__front:hover{border-color:rgba(157,255,60,.55); box-shadow:var(--shadow-neon)}
.flip.is-flipped .flip__front{pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .flip:hover .flip__front, .flip:focus-within .flip__front{pointer-events:none}
}
/* aspect-ratio 800/420 = el viewBox real de las ilustraciones (ver data.js,
   artFrame): si no coincide con el contenedor, "xMidYMid slice" recorta
   el arte de forma pareja a ambos lados y descentra la composición
   (llegaba a cortar el texto del rótulo inferior). */
.flip__media{position:relative; display:block; flex:none; aspect-ratio:800/420; min-height:0; overflow:hidden; border-bottom:1px solid var(--line-soft)}
.flip__media svg{width:100%; height:100%; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.flip__front:hover .flip__media svg{transform:scale(1.05)}
.flip__label{padding:1.1rem 1.3rem 1.3rem; display:flex; flex-direction:column; flex:1; min-height:0}
.flip__name{display:block; font-family:var(--font-head); font-weight:600; font-size:1.14rem; line-height:1.25; margin:0 0 .45rem; color:#f2fee7}
.flip__front:hover .flip__name{color:var(--neon)}
.flip__tag{display:block; font-size:.9rem; color:var(--txt-dim); margin:0 0 1rem; flex:1}
.flip__hint{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  align-self:center; margin-top:auto;
  padding:.6rem 1.1rem; border-radius:999px; border:1px solid var(--neon);
  background:rgba(157,255,60,.08);
  font:600 .77rem/1 var(--font-head); letter-spacing:.1em; text-transform:uppercase; color:var(--neon);
  transition:background .2s, color .2s, box-shadow .2s;
}
.flip__front:hover .flip__hint{background:var(--neon); color:var(--azul-950); box-shadow:0 10px 26px -10px var(--neon-glow)}
.flip__hint svg{width:14px; height:14px; transition:transform .4s}
.flip__front:hover .flip__hint svg{transform:rotate(180deg)}

/* Cara trasera */
.flip__back{
  transform:rotateY(180deg); pointer-events:none;
  background:linear-gradient(165deg, #0c1f45, #061027);
  border-color:rgba(157,255,60,.4);
  padding:1.25rem 1.3rem 1.2rem; overflow:hidden;
}
.flip.is-flipped .flip__back{pointer-events:auto; box-shadow:var(--shadow-neon)}
@media (hover:hover) and (pointer:fine){
  .flip:hover .flip__back, .flip:focus-within .flip__back{pointer-events:auto; box-shadow:var(--shadow-neon)}
}
.flip__backTitle{font-size:1.05rem; margin:0 0 .9rem; color:var(--neon); letter-spacing:.02em}

/* El botón «Volver»: en mouse, el volteo lo dispara :hover (no la clase
   is-flipped), así que al hacer click en «Volver» sin mover el cursor,
   la tarjeta seguía "hover" y :hover volvía a voltearla. Esta clase
   fuerza el frente hasta que el mouse realmente se retira. */
.flip.force-front .flip__inner{transform:none !important}
.flip.force-front .flip__front{pointer-events:auto !important}
.flip.force-front .flip__back{pointer-events:none !important}

/* minmax(0,1fr), no solo 1fr: si una etiqueta larga ("VISIÓN NOCTURNA")
   pide más ancho del que le toca, 1fr solo deja crecer la columna y toda
   la grilla se corre/desborda por la derecha. Con el mínimo en 0 las tres
   columnas quedan siempre parejas y centradas, y el texto envuelve dentro
   de su celda en vez de empujarla. */
.minis{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.45rem; margin-bottom:.9rem}
.minis figure{
  margin:0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem;
  aspect-ratio:1/.56; border-radius:10px; color:var(--neon);
  background:rgba(157,255,60,.07); border:1px solid var(--line);
}
.minis .mini{width:auto; height:44%; max-width:60%; filter:drop-shadow(0 0 8px var(--neon-glow))}
.minis figcaption{font:600 .56rem/1.1 var(--font-head); letter-spacing:.07em; text-transform:uppercase; color:var(--txt-dim); text-align:center; padding:0 .2rem; overflow-wrap:break-word}

.flip__desc{font-size:.88rem; line-height:1.55; color:var(--txt); margin:0 0 auto; min-height:0; overflow-y:auto; padding-right:.2rem}
.flip__desc b{color:var(--neon)}
.flip__actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem}
.flip__back button{flex:1; min-width:120px}

/* =========================================================================
   MODAL DE FICHAS
   ========================================================================= */
.modal{position:fixed; inset:0; z-index:120; display:flex; align-items:flex-start; justify-content:center; padding:clamp(.75rem,3vw,2.5rem)}
.modal[hidden]{display:none !important}
.modal__backdrop{position:absolute; inset:0; background:rgba(2,6,14,.82); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

.modal__dialog{
  position:relative; width:min(100%, 940px); max-height:calc(100svh - 2rem);
  display:flex; flex-direction:column;
  background:linear-gradient(170deg, #0a1839, var(--azul-950));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow), 0 0 90px -30px var(--neon-glow);
  overflow:hidden; margin:auto; animation:pop .34s cubic-bezier(.2,.8,.25,1);
}
@keyframes pop{from{opacity:0; transform:translateY(24px) scale(.97)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .modal__dialog,.modal__backdrop{animation:none} }

.modal__toolbar{display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; border-bottom:1px solid var(--line-soft); background:rgba(3,7,15,.55); flex:none}
.modal__back,.modal__close{
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(157,255,60,.09); border:1px solid var(--line); border-radius:10px;
  color:var(--neon); cursor:pointer; padding:.5rem .75rem;
  font:600 .8rem/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase; transition:background .2s, color .2s;
}
.modal__back:hover,.modal__close:hover{background:var(--neon); color:var(--azul-950)}
.modal__back svg,.modal__close svg{width:16px; height:16px}
.modal__close{margin-left:auto; padding:.5rem}
.modal__crumbs{font-size:.76rem; color:var(--txt-dim); letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0}
.modal__crumbs b{color:var(--neon); font-weight:600}
.modal__crumbs span{opacity:.5; margin:0 .4rem}

.modal__body{overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--neon-deep) transparent}
.modal__body::-webkit-scrollbar{width:9px}
.modal__body::-webkit-scrollbar-thumb{background:rgba(157,255,60,.35); border-radius:9px}

.sheet__media{position:relative; aspect-ratio:800/380; overflow:hidden}
.sheet__media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(6,16,39,.85) 74%, #061027 100%)}
.sheet__media .art__tag{display:none}
.sheet__head{padding:1.4rem clamp(1.1rem,3.5vw,2.4rem) 0; margin-top:-3.2rem; position:relative; z-index:2}
.sheet__kicker{font:600 .72rem/1 var(--font-head); letter-spacing:.2em; text-transform:uppercase; color:var(--cian); margin:0 0 .6rem}
.sheet__title{font-size:clamp(1.4rem,3.4vw,2.1rem); line-height:1.2; margin:0 0 .5rem; color:var(--neon); text-shadow:0 0 40px var(--neon-glow)}
.sheet__tagline{color:var(--txt); margin:0; font-size:1.02rem}

.sheet__content{padding:1.6rem clamp(1.1rem,3.5vw,2.4rem) 2.4rem}
.sheet__h{font-size:1.15rem; color:var(--neon); margin:2rem 0 .8rem}
.sheet__h:first-child{margin-top:0}
.sheet__content p{margin:0 0 1rem; color:var(--txt)}
.sheet__content strong{color:#f2fee7}
.sheet__content em{color:var(--cian); font-style:normal}

.bullets{list-style:none; padding:0; margin:0; display:grid; gap:.6rem}
.bullets li{position:relative; padding-left:1.7rem; color:var(--txt); font-size:.96rem}
.bullets li::before{content:''; position:absolute; left:0; top:.55em; width:8px; height:8px; border-radius:2px; transform:rotate(45deg); background:var(--neon); box-shadow:0 0 10px var(--neon-glow)}

.subgrid{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); margin-top:.4rem}
.subcard{
  display:flex; align-items:center; gap:.85rem; text-align:left; padding:.85rem 1rem; border-radius:14px; cursor:pointer;
  background:rgba(157,255,60,.05); border:1px solid var(--line); color:var(--txt); font:inherit;
  transition:background .2s, transform .2s, border-color .2s;
}
.subcard:hover{background:rgba(157,255,60,.13); border-color:rgba(157,255,60,.55); transform:translateY(-3px)}
.subcard__thumb{flex:none; width:58px; height:44px; border-radius:9px; overflow:hidden; border:1px solid var(--line-soft)}
.subcard__thumb svg{width:100%; height:100%}
.subcard__thumb .art__tag,.subcard__thumb .art__lbl,.subcard__thumb .art__lbl2{display:none}
.subcard__txt{min-width:0}
.subcard__name{display:block; font-family:var(--font-head); font-weight:600; font-size:.92rem; color:var(--neon); line-height:1.25}
.subcard__hint{display:block; font-size:.76rem; color:var(--txt-dim); margin-top:.15rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.sheet__cta{
  margin:2.2rem auto 0; padding:1.6rem 2rem; max-width:680px; border-radius:var(--radius); border:1px solid var(--line);
  background:rgba(157,255,60,.07); display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
}
.sheet__cta p{margin:0; color:var(--txt); font-size:1.06rem}
.sheet__cta strong{color:var(--neon)}

/* =========================================================================
   NOSOTROS
   ========================================================================= */
.about{display:grid; gap:2.5rem; grid-template-columns:1.05fr .95fr; align-items:start}
.about p{color:var(--txt)}
.checklist{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.7rem}
.checklist li{position:relative; padding-left:2rem; color:var(--txt)}
.checklist li::before{content:''; position:absolute; left:0; top:.35em; width:16px; height:16px; border-radius:5px; background:rgba(157,255,60,.15); border:1px solid var(--neon)}
.checklist li::after{content:''; position:absolute; left:5px; top:.62em; width:5px; height:9px; border:solid var(--neon); border-width:0 2px 2px 0; transform:rotate(45deg)}
.panel-card{background:linear-gradient(165deg, var(--card), var(--card-2)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow)}
.panel-card h3{margin-top:0; font-size:1.15rem; letter-spacing:.08em; text-transform:uppercase}
.steps{list-style:none; counter-reset:s; padding:0; margin:0; display:grid; gap:1.1rem}
.steps li{display:flex; gap:1rem}
.steps span{flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font:700 .95rem var(--font-head); color:#0b1a02; background:linear-gradient(135deg, var(--neon), var(--neon-deep)); box-shadow:0 0 20px -6px var(--neon-glow)}
.steps strong{color:var(--neon); font-family:var(--font-head); letter-spacing:.04em}
.steps p{margin:.15rem 0 0; font-size:.9rem; color:var(--txt-dim)}

/* =========================================================================
   CONTACTO
   ========================================================================= */
.contact{display:grid; gap:2.5rem; grid-template-columns:1fr 1.05fr; align-items:start}
.contact__list{list-style:none; padding:0; margin:2rem 0 0; display:grid; gap:1rem}
.contact__list li{display:flex; gap:.9rem; align-items:flex-start}
.contact__list svg{width:22px; height:22px; flex:none; color:var(--neon); margin-top:.2rem}
.contact__list strong{display:block; font-family:var(--font-head); color:var(--neon); font-size:.86rem; letter-spacing:.1em; text-transform:uppercase}
.contact__list span,.contact__list a{color:var(--txt); font-size:.96rem}

.form{background:linear-gradient(165deg, var(--card), var(--card-2)); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow)}
.form__title{margin:0 0 1.4rem; font-size:1.15rem; letter-spacing:.1em; text-transform:uppercase}
.field{margin-bottom:1.05rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field label{display:block; margin-bottom:.4rem; font:600 .8rem/1.3 var(--font-head); letter-spacing:.08em; text-transform:uppercase; color:var(--neon)}
.req{color:#ff9e6b}
.opt{color:var(--txt-dim); text-transform:none; letter-spacing:0; font-weight:400}

.field input,.field select,.field textarea{
  width:100%; padding:.8rem .95rem; background:rgba(3,7,15,.6); color:var(--txt);
  border:1px solid var(--line-soft); border-radius:11px; font:400 .97rem/1.4 var(--font-body);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.field textarea{resize:vertical; min-height:110px}
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239dff3c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:17px; padding-right:2.6rem;
}
.field select option,.field select optgroup{background:#0a1735; color:var(--txt)}
.field select optgroup{color:var(--neon); font-family:var(--font-head)}
.field input::placeholder,.field textarea::placeholder{color:#5f7595}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--neon); box-shadow:0 0 0 3px rgba(157,255,60,.17); background:rgba(3,7,15,.8)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#ff7a5c}
.field__error{margin:.35rem 0 0; font-size:.8rem; color:#ff9e6b}
.field__error:empty{display:none}

.check{display:flex; gap:.7rem; align-items:flex-start; margin:.4rem 0 1.3rem; font-size:.88rem; color:var(--txt-dim); cursor:pointer}
.check input{flex:none; width:19px; height:19px; margin-top:.15rem; accent-color:var(--neon); cursor:pointer}
.form__note{margin:.85rem 0 0; font-size:.82rem; color:var(--txt-dim); text-align:center}
.form__status{margin:.8rem 0 0; font-size:.9rem; text-align:center}
.form__status:empty{display:none}
.form__status.is-ok{color:var(--neon)}
.form__status.is-err{color:#ff9e6b}

/* =========================================================================
   FOOTER + WHATSAPP FLOTANTE
   ========================================================================= */
.footer{background:var(--azul-950); border-top:1px solid var(--line); padding-top:3.5rem}
.footer__inner{display:grid; grid-template-columns:minmax(220px,1fr) 2.2fr; gap:2.5rem; padding-bottom:2.5rem}
/* Centrado dentro de su columna (no del ancho total de la página) y pegado
   hacia el borde inferior de la fila, en vez de flotar arriba/al medio. */
.footer__brand{display:flex; flex-direction:column; align-items:center; text-align:center; align-self:end; margin-left:-1rem}
.footer__brand .brand__word{font-size:2.6rem}
.footer__brand .brand__tag{font-size:.68rem}
.footer__brand p{color:var(--txt-dim); font-size:.92rem; margin:1.1rem 0 0; max-width:32ch}
.footer__social{display:flex; gap:.6rem; margin-top:1.1rem}
.footer__social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.15rem; height:2.15rem; border-radius:999px;
  border:1px solid var(--line-soft); color:var(--txt-dim);
  transition:color .18s, border-color .18s, transform .18s;
}
.footer__social a:hover{color:var(--neon); border-color:var(--line); transform:translateY(-2px)}
.footer__social svg{width:1.05rem; height:1.05rem}
.footer__cols{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:1.6rem}
.footer__col h4{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 .8rem}
/* El título es un link (h4>a): ".footer__col a" de abajo tiene la misma
   especificidad y, por ir después, le ganaba al verde de ".footer__col h4".
   Se apunta directo al link del título para que quede siempre verde. */
.footer__col h4 a{color:var(--neon)}
.footer__col h4 a:hover{color:var(--neon-soft)}
.footer__col ul{list-style:none; padding:0; margin:0; display:grid; gap:.45rem}
.footer__col a{color:var(--txt-dim); font-size:.88rem; transition:color .18s, padding-left .18s}
.footer__col a:hover{color:var(--neon); padding-left:4px}
.footer__legal{display:flex; justify-content:center; padding:1.2rem 0; border-top:1px solid var(--line-soft); font-size:.8rem; color:var(--txt-dim); text-align:center}

.wa-float{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:100;
  display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.15rem; border-radius:999px;
  background:linear-gradient(135deg, var(--neon), var(--neon-deep)); color:#0b1a02;
  font:600 .87rem/1 var(--font-head); letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 14px 40px -12px var(--neon-glow), 0 0 0 1px rgba(255,255,255,.15) inset;
  transition:transform .22s, box-shadow .22s;
}
.wa-float:hover{transform:translateY(-3px) scale(1.03); color:#0b1a02; box-shadow:0 20px 50px -12px var(--neon-glow)}
.wa-float svg{width:21px; height:21px}

/* Botón "volver arriba": aparece al llegar cerca del final de la página */
.back-top{
  position:fixed; left:1.1rem; bottom:1.1rem; z-index:100;
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:var(--card-2); color:var(--neon); cursor:pointer;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background .18s, border-color .18s;
}
.back-top.is-visible{opacity:1; visibility:visible; transform:none}
.back-top:hover{border-color:var(--neon); background:var(--card)}
.back-top svg{width:20px; height:20px}
body.has-cookie-banner .back-top{bottom:calc(var(--cookie-h, 88px) + 1.1rem)}
@media (prefers-reduced-motion:reduce){ .back-top{transition:opacity .25s, visibility .25s} }

/* Aviso de cookies — inyectado por assets/js/consent.js */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--azul-950); border-top:1px solid var(--line);
  box-shadow:0 -14px 40px -12px rgba(0,0,0,.45);
}
.cookie-banner__inner{
  width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto;
  padding:1.1rem 0; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.cookie-banner__text{color:var(--txt-dim); font-size:.87rem; line-height:1.5; flex:1 1 320px; margin:0}
.cookie-banner__text a{color:var(--neon)}
.cookie-banner__actions{display:flex; gap:.7rem; flex:0 0 auto}
/* Mientras el aviso está visible, sube los botones flotantes para que no
   queden tapados. La altura real la mide assets/js/consent.js (varía según
   cuántas líneas ocupe el texto en pantallas angostas) y la deja en la
   variable --cookie-h; 88px es el respaldo antes de que el JS la calcule. */
body.has-cookie-banner .wa-float{bottom:calc(var(--cookie-h, 88px) + 1.1rem)}

/* Ilustraciones SVG */
.art{display:block; width:100%; height:100%}
.art__ink{color:var(--neon)}
.art__nodes{fill:var(--cian); color:var(--cian)}
.art__tag{font-family:'Chakra Petch',sans-serif; font-size:15px; font-weight:600; letter-spacing:.18em; fill:#9dff3c; fill-opacity:.7}
.art__lbl{font-family:'Chakra Petch',sans-serif; font-size:13px; letter-spacing:.14em; fill:#7fe9ff; fill-opacity:.75}
.art__lbl2{font-family:'Chakra Petch',sans-serif; font-size:15px; font-weight:600; fill:#7fe9ff; fill-opacity:.9}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1000px){
  .about,.contact{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr}
  .footer__brand{margin-left:0}
}

/* Bajo 1200px la barra completa no cabe: se pasa al menú lateral */
@media (max-width:1200px){
  .burger{display:flex}
  .nav{
    position:fixed; inset:74px 0 0; margin:0;
    background:linear-gradient(180deg, rgba(5,11,26,.985), rgba(3,7,15,.99));
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    padding:1.2rem 1.25rem 3rem; overflow-y:auto;
    transform:translateX(100%); transition:transform .34s cubic-bezier(.2,.8,.2,1);
    border-top:1px solid var(--line);
  }
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column; align-items:stretch; gap:.3rem}
  .nav__item{width:100%}
  .nav__link,.nav__toggle{width:100%; justify-content:space-between; padding:.95rem 1rem; font-size:1rem; border-bottom:1px solid var(--line-soft); border-radius:10px}
  .nav__link--cta{margin:1rem 0 0; justify-content:center; border-radius:12px}

  .drop{
    position:static; transform:none; width:100%;
    opacity:1; visibility:visible; pointer-events:auto;
    background:rgba(157,255,60,.04); border:0; border-left:2px solid var(--line);
    border-radius:0 0 10px 10px; box-shadow:none; backdrop-filter:none;
    padding:0 0 0 .55rem; margin:.2rem 0 .5rem;
    max-height:0; overflow:hidden; transition:max-height .35s ease, padding .3s ease;
  }
  /* La regla de escritorio ".nav__item.is-open>.drop" (más específica que
     ".drop" solo) sigue centrando el menú con translateX(-50%); sin este
     reseteo, al abrir "Servicios" en el celular el desplegable se corría
     medio ancho hacia la izquierda y el texto quedaba cortado. */
  .nav__item.is-open>.drop{transform:none}
  .drop::before{display:none}
  .nav__item.is-open>.drop{max-height:1400px; padding:.5rem .3rem .5rem .55rem}

  .drop__sub{
    position:static; width:100%; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    background:rgba(3,7,15,.5); border:0; border-left:2px solid var(--line-soft); border-radius:0;
    box-shadow:none; padding:0 0 0 .5rem; margin:0 0 .3rem .6rem;
    max-height:0; overflow:hidden; transition:max-height .3s ease, padding .25s ease;
  }
  .drop__item.is-open>.drop__sub{max-height:520px; padding:.35rem 0 .45rem .5rem}
  .drop__expand{width:46px}
  .banner{min-height:auto}
  .hero{padding-bottom:6rem}
}

@media (max-width:640px){
  .wrap{width:min(100% - 1.75rem, var(--wrap))}
  .topbar__inner{width:min(100% - 1.75rem, 1320px); min-height:66px}
  .nav{inset:66px 0 0}
  .banner{padding-top:66px}
  .brand__word{font-size:1.24rem}
  .brand__tag{font-size:.48rem; letter-spacing:.26em}
  .field-row{grid-template-columns:1fr; gap:0}
  .hero__actions .btn{flex:1}
  .cats,.flips{grid-template-columns:1fr}
  .flip{height:465px}
  .banner__hint{display:none}
  .wa-float span{display:none}
  .wa-float{padding:.95rem; border-radius:50%}
  .modal{padding:0}
  .modal__dialog{max-height:100svh; height:100svh; border-radius:0; border:0; width:100%}
  .footer__brand .brand__word{font-size:2.1rem}
  .sheet__cta{flex-direction:column; align-items:center; text-align:center}
}