/* ==========================================================================
   NxtCi — main.css
   Hoja de estilos compartida por todo el sitio.

   BLOQUE A  (líneas ~20-330) : estilos originales del index.html, copiados
                                literalmente. NO tocar: mantienen el home
                                exactamente como estaba. Lo único que cambió
                                son las rutas de imagen, que ahora son
                                absolutas (/assets/...) porque este archivo
                                vive en /assets/css/ y lo consumen páginas a
                                varios niveles de profundidad.
   BLOQUE B  (a partir de ~330): componentes nuevos añadidos para las páginas
                                interiores (servicios, casos, contacto, 404),
                                selector de idioma y menú móvil.
   ========================================================================== */


/* ==========================================================================
   BLOQUE A — BASE ORIGINAL
   ========================================================================== */

:root{
  --cosmic:#070B14; --indigo:#4338CA; --cyan:#00E5FF; --mint:#36F5C7;
  --ice:#F8FAFC; --titanium:#A8B3C7;
  --ease:cubic-bezier(.2,.65,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--cosmic); color:var(--titanium);
  font-family:'Satoshi',system-ui,-apple-system,sans-serif;
  font-weight:400; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  animation:bodyIn .7s ease-out;
}
@keyframes bodyIn{from{opacity:0}to{opacity:1}}
::selection{background:rgba(0,229,255,.28); color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--cosmic)}
::-webkit-scrollbar-thumb{background:rgba(168,179,199,.18); border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,229,255,.35)}
h1,h2,h3,.gs{font-family:'General Sans','Satoshi',system-ui,sans-serif}
a{color:inherit;text-decoration:none}

/* ---------- atmosphere layers ---------- */
#aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 72% 18%, rgba(67,56,202,.20), transparent 70%),
    radial-gradient(30% 26% at 18% 78%, rgba(0,229,255,.07), transparent 70%),
    radial-gradient(24% 20% at 85% 82%, rgba(54,245,199,.045), transparent 70%);
  animation:auroraDrift 34s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-3%,2.5%,0) scale(1.07)}
}
#cosmos{position:fixed;inset:0;z-index:1;pointer-events:none}
#cursorGlow{position:fixed;top:0;left:0;width:560px;height:560px;z-index:3;pointer-events:none;
  background:radial-gradient(circle, rgba(0,229,255,.06), transparent 62%);
  transform:translate(-50%,-50%); will-change:transform;
}
@media (hover:none){#cursorGlow{display:none}}
#grain{position:fixed;inset:0;z-index:60;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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
body > header{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px clamp(20px,4vw,44px);
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
body > header.scrolled{background:rgba(7,11,20,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:rgba(168,179,199,.09)}
.brand{display:flex;align-items:center;gap:12px}
.brand svg,.brand img{width:30px;height:auto;display:block}
.brand span{font-family:'General Sans',sans-serif;font-weight:600;font-size:17px;color:var(--ice);letter-spacing:.02em}
body > header nav{display:flex;gap:34px}
body > header nav a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--titanium);position:relative;transition:color .3s}
body > header nav a::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
body > header nav a:hover{color:var(--ice)}
body > header nav a:hover::after{transform:scaleX(1)}
.nav-cta{font-family:'General Sans',sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ice);padding:9px 20px;border-radius:999px;
  border:1px solid rgba(0,229,255,.32);background:rgba(0,229,255,.03);
  transition:box-shadow .35s var(--ease), background .35s, border-color .35s;
}
.nav-cta:hover{border-color:rgba(0,229,255,.8);background:rgba(0,229,255,.08);box-shadow:0 0 26px rgba(0,229,255,.22)}
@media (max-width:860px){body > header nav{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding:0 clamp(20px,8vw,120px);max-width:1280px;margin:0 auto;
}
.hero .cta-row{justify-content:center}
.hero-lockup{width:clamp(190px,23vw,280px);height:auto;margin-bottom:44px;
  filter:drop-shadow(0 0 44px rgba(0,229,255,.16));
}
.hero-statement{font-family:'General Sans',sans-serif;font-weight:500;
  font-size:clamp(1.7rem,4.4vw,3.6rem);line-height:1.22;letter-spacing:-.025em;color:var(--titanium);
}
.hero-statement .b{display:block}
.hero-statement .grad-text{font-weight:600}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--titanium)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px var(--mint);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.grad-text{
  background:linear-gradient(110deg,#4338CA 0%,#00E5FF 42%,#4338CA 88%);
  background-size:230% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-statement .grad-text,.signal .grad-text{animation:gradShift 8s ease-in-out 1.2s infinite alternate}
@keyframes gradShift{from{background-position:0% 0}to{background-position:100% 0}}
.cta-row{display:flex;align-items:center;gap:26px;margin-top:48px;flex-wrap:wrap}
.btn-primary{
  position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;
  font-family:'General Sans',sans-serif;font-weight:500;font-size:15px;letter-spacing:.04em;color:var(--ice);
  padding:17px 32px;border-radius:14px;cursor:pointer;
  background:rgba(248,250,252,.045);border:1px solid rgba(0,229,255,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease), background .4s, transform .25s var(--ease);
}
.btn-primary .arr{transition:transform .35s var(--ease);color:var(--cyan)}
.btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(0,229,255,.14),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);
}
.btn-primary:hover{border-color:rgba(0,229,255,.85);background:rgba(0,229,255,.06);
  box-shadow:0 0 44px rgba(0,229,255,.22), inset 0 0 26px rgba(0,229,255,.05);
}
.btn-primary:hover::after{left:120%}
.btn-primary:hover .arr{transform:translateX(5px)}
.btn-ghost{font-size:13.5px;letter-spacing:.06em;color:var(--titanium);border-bottom:1px solid rgba(168,179,199,.25);padding-bottom:3px;transition:color .3s,border-color .3s}
.btn-ghost:hover{color:var(--cyan);border-color:var(--cyan)}
.fu{opacity:0;transform:translateY(20px);animation:fu .95s var(--ease) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.55s}.d3{animation-delay:.75s}.d4{animation-delay:.95s}
@keyframes fu{to{opacity:1;transform:translateY(0)}}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:rgba(168,179,199,.55)}
.scroll-cue .line{width:1px;height:44px;background:rgba(168,179,199,.18);position:relative;overflow:hidden}
.scroll-cue .line::after{content:'';position:absolute;top:-8px;left:0;width:1px;height:8px;background:var(--cyan);animation:cueDot 2.2s var(--ease) infinite}
@keyframes cueDot{0%{transform:translateY(0);opacity:0}18%{opacity:1}100%{transform:translateY(52px);opacity:0}}
@media (max-width:860px){.scroll-cue{display:none}}

/* ---------- manifesto ---------- */
.manifesto{position:relative;z-index:2;padding:clamp(84px,13vh,170px) clamp(20px,8vw,120px) clamp(56px,9vh,120px);max-width:1150px;margin:0 auto}
.manifesto::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('/assets/img/texture-nebula.jpg') center/cover no-repeat;
  opacity:.55;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 50%, #000 30%, transparent 100%);
  mask-image:radial-gradient(75% 70% at 50% 50%, #000 30%, transparent 100%);
}
.sec-eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(0,229,255,.75);margin-bottom:38px;display:flex;align-items:center;gap:14px}
.sec-eyebrow::before{content:'';width:34px;height:1px;background:linear-gradient(90deg,var(--indigo),var(--cyan))}
.manifesto-text{font-family:'General Sans',sans-serif;font-weight:500;
  font-size:clamp(1.75rem,4.1vw,3.5rem);line-height:1.3;letter-spacing:-.02em;
}
.manifesto-text .w{color:rgba(168,179,199,.15);transition:color .45s ease}
.manifesto-text .w.on{color:var(--ice)}
.manifesto-text .w.g.on{
  background:linear-gradient(100deg,var(--indigo),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(0,229,255,.28));
}

/* ---------- purpose (mission & vision) ---------- */
.purpose{position:relative;z-index:2;padding:clamp(56px,8vh,100px) clamp(20px,8vw,120px);max-width:1280px;margin:0 auto}
.purpose h2{font-weight:600;font-size:clamp(2.1rem,4.6vw,3.7rem);letter-spacing:-.03em;color:var(--ice);margin-bottom:56px}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px}
.mv-card{position:relative;overflow:hidden;border-radius:20px;padding:44px 38px 48px;
  background:linear-gradient(160deg, rgba(248,250,252,.05), rgba(248,250,252,.014));
  border:1px solid rgba(168,179,199,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.mv-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.55),transparent);opacity:.6;
}
.mv-card:hover{transform:translateY(-5px);border-color:rgba(0,229,255,.4);
  box-shadow:0 24px 70px -26px rgba(0,229,255,.16);
}
.mv-tag{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:rgba(0,229,255,.75);
  margin-bottom:26px;display:flex;align-items:center;gap:14px;
}
.mv-tag::before{content:'';width:30px;height:1px;background:linear-gradient(90deg,var(--indigo),var(--cyan))}
.mv-card h3{font-family:'General Sans',sans-serif;font-weight:600;
  font-size:clamp(1.35rem,2.2vw,1.85rem);letter-spacing:-.02em;color:var(--ice);
  line-height:1.28;margin-bottom:18px;
}
.mv-card p{font-size:.97rem;line-height:1.78;font-weight:300}

/* ---------- capabilities ---------- */
.capabilities{position:relative;z-index:2;padding:clamp(56px,8vh,100px) clamp(20px,8vw,120px) clamp(64px,9vh,110px);max-width:1280px;margin:0 auto}
.capabilities h2{font-weight:600;font-size:clamp(2.1rem,4.6vw,3.7rem);letter-spacing:-.03em;color:var(--ice);margin-bottom:64px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px}
.card{
  position:relative;overflow:hidden;border-radius:20px;padding:36px 30px 40px;
  background:linear-gradient(160deg, rgba(248,250,252,.05), rgba(248,250,252,.014));
  border:1px solid rgba(168,179,199,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(0,229,255,.09), transparent 68%);
}
.card:hover{transform:translateY(-6px);border-color:rgba(0,229,255,.42);box-shadow:0 24px 70px -24px rgba(0,229,255,.16)}
.card:hover::before{opacity:1}
.card .idx{font-size:11px;letter-spacing:.28em;color:rgba(168,179,199,.5)}
.card .card-img{position:relative;margin:-36px -30px 24px;height:142px;overflow:hidden}
.card .card-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);
  transition:transform 1s var(--ease)}
.card:hover .card-img img{transform:scale(1.09)}
.card .card-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,11,20,0) 46%, rgba(9,13,24,.92) 100%);
}
.card h3{font-weight:600;font-size:1.32rem;letter-spacing:-.01em;color:var(--ice);margin-bottom:12px}
.card p{font-size:.95rem;line-height:1.65;font-weight:300}
.card .lead{color:var(--ice);font-weight:400;margin-bottom:8px}
.ci-strip{margin-top:22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;
  padding:54px clamp(22px,5vw,60px) 46px;border-radius:20px;position:relative;overflow:hidden;
  background:linear-gradient(120deg, rgba(67,56,202,.15), rgba(0,229,255,.05) 55%, rgba(54,245,199,.05));
  border:1px solid rgba(168,179,199,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.ci-strip::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(54,245,199,.5),transparent);opacity:.7;
}
.ci-strip:hover{border-color:rgba(0,229,255,.4);box-shadow:0 20px 60px -24px rgba(0,229,255,.18)}
.ci-strip .mv-tag{margin-bottom:0}
.ci-stage{margin:0;font-family:'General Sans',sans-serif;font-weight:600;color:var(--ice);
  font-size:clamp(1.8rem,5vw,3.4rem);letter-spacing:-.02em;line-height:1.15;
  display:flex;align-items:baseline;justify-content:center;gap:.26em;flex-wrap:wrap;
}
.ci-window{display:inline-block;overflow:hidden;vertical-align:bottom}
.ci-word{display:inline-block;color:var(--mint);min-width:1ch;
  transition:transform .42s var(--ease), opacity .42s ease, filter .42s ease;
}
.ci-word.out{transform:translateY(-112%);opacity:0;filter:blur(4px)}
.ci-word.in{animation:ciIn .46s var(--ease)}
@keyframes ciIn{from{transform:translateY(112%);opacity:0;filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}
.ci-chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ci-chip{font-family:'Satoshi',sans-serif;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--titanium);border:1px solid rgba(168,179,199,.22);border-radius:999px;
  padding:8px 16px;background:transparent;cursor:pointer;
  transition:color .35s,border-color .35s,box-shadow .35s,background .35s;
}
.ci-chip:hover{border-color:rgba(0,229,255,.5);color:var(--ice)}
.ci-chip.on{color:var(--mint);border-color:rgba(54,245,199,.55);
  background:rgba(54,245,199,.06);box-shadow:0 0 20px rgba(54,245,199,.14);
}
.ci-note{margin:0;font-size:.82rem;color:rgba(168,179,199,.6);letter-spacing:.02em;text-align:center}
.ci-note em{color:rgba(248,250,252,.78);font-style:normal}

/* ---------- vision ---------- */
.vision{position:relative;z-index:2;padding:clamp(64px,9vh,110px) clamp(20px,8vw,120px);max-width:1150px;margin:0 auto}
.vision h2{font-weight:600;font-size:clamp(2.1rem,4.6vw,3.7rem);letter-spacing:-.03em;color:var(--ice);margin-bottom:52px}
.vision-frame{position:relative;border-radius:24px;overflow:hidden;
  border:1px solid rgba(0,229,255,.16);
  box-shadow:0 40px 120px -40px rgba(67,56,202,.5), 0 0 90px -30px rgba(0,229,255,.14);
}
.vision-frame img{display:block;width:100%;height:auto;
  animation:visionDrift 26s ease-in-out infinite alternate;will-change:transform}
@keyframes visionDrift{
  from{transform:scale(1) translate(0,0)}
  to{transform:scale(1.06) translate(-1.2%,1.5%)}
}
.vision-frame::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(248,250,252,.05), transparent 22%);
  box-shadow:inset 0 0 0 1px rgba(248,250,252,.04);border-radius:24px;
}
.core-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:920px){.core-grid{grid-template-columns:1fr}}
.core-lead{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.68;font-weight:300;margin-bottom:30px}
.core-lead span{color:var(--cyan)}
.core-point{padding:20px 0;border-top:1px solid rgba(168,179,199,.12)}
.core-point:last-child{border-bottom:1px solid rgba(168,179,199,.12)}
.core-idx{font-size:11px;letter-spacing:.28em;color:rgba(0,229,255,.7)}
.core-point h3{font-family:'General Sans',sans-serif;font-size:1.15rem;font-weight:600;color:var(--ice);margin:9px 0 7px;letter-spacing:-.01em}
.core-point p{font-size:.92rem;line-height:1.68;font-weight:300}
@media (prefers-reduced-motion:reduce){.vision-frame img{animation:none}}

/* ---------- signal ---------- */
.signal{position:relative;z-index:2;min-height:92svh;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(64px,10vh,120px) clamp(20px,8vw,120px);
}
.signal .big{font-family:'General Sans',sans-serif;font-weight:500;font-size:clamp(2.2rem,5.4vw,4.8rem);line-height:1.16;letter-spacing:-.028em;color:var(--titanium)}
.signal .big .b{display:block}
.signal .big .grad-text{font-weight:600}
.signal-sub{margin-top:22px;font-size:clamp(1rem,1.6vw,1.3rem);font-weight:300;color:var(--titanium);letter-spacing:.02em}
.signal .btn-primary{margin-top:54px}

/* ---------- footer ---------- */
footer{position:relative;z-index:2;padding:0 clamp(20px,8vw,120px) 46px;max-width:1280px;margin:0 auto}
.hairline{height:1px;background:linear-gradient(90deg,transparent,rgba(67,56,202,.65),rgba(0,229,255,.65),transparent)}
.f-main{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;padding:44px 0 34px}
.f-brand{display:flex;align-items:center;gap:11px}
.f-brand svg,.f-brand img{width:24px;height:auto;display:block}
.f-brand .n{font-family:'General Sans',sans-serif;font-weight:600;color:var(--ice);font-size:15px}
.f-brand .t{display:block;font-size:11px;color:rgba(168,179,199,.6);letter-spacing:.06em;margin-top:2px}
.f-tag{text-align:center;font-family:'General Sans',sans-serif;font-size:14.5px;letter-spacing:.04em;color:rgba(248,250,252,.82)}
.f-links{display:flex;gap:26px;justify-content:flex-end;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.f-links a{color:var(--titanium);transition:color .3s}
.f-links a:hover{color:var(--cyan)}
.f-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(168,179,199,.07);
  font-size:11.5px;letter-spacing:.06em;color:rgba(168,179,199,.5)}
.f-bottom a{color:rgba(168,179,199,.75);transition:color .3s}
.f-bottom a:hover{color:var(--cyan)}
@media (max-width:860px){
  .f-main{grid-template-columns:1fr;text-align:center;justify-items:center;gap:22px}
  .f-links{justify-content:center}
}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s var(--ease), transform .95s var(--ease)}
.rv.in{opacity:1;transform:translateY(0)}


/* ==========================================================================
   BLOQUE B — COMPONENTES NUEVOS
   ========================================================================== */

/* ---------- accesibilidad: salto al contenido ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--indigo);color:var(--ice);padding:12px 20px;border-radius:0 0 10px 0;
  font-size:13px;letter-spacing:.04em}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ---------- selector de idioma ES / EN ---------- */
.nav-right{display:flex;align-items:center;gap:16px}
.lang-switch{display:flex;align-items:center;gap:2px;
  border:1px solid rgba(168,179,199,.18);border-radius:999px;padding:3px;
  background:rgba(248,250,252,.03);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lang-switch a{font-family:'General Sans',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(168,179,199,.7);
  padding:5px 11px;border-radius:999px;transition:color .3s,background .3s}
.lang-switch a:hover{color:var(--ice)}
.lang-switch a[aria-current="true"]{color:var(--cosmic);background:var(--cyan);font-weight:600}

/* ---------- menú móvil ---------- */
.nav-toggle{display:none;width:42px;height:42px;border-radius:12px;cursor:pointer;
  background:rgba(248,250,252,.04);border:1px solid rgba(168,179,199,.18);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:border-color .3s,background .3s}
.nav-toggle:hover{border-color:rgba(0,229,255,.5)}
.nav-toggle span{display:block;width:17px;height:1.5px;background:var(--ice);border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-nav{position:fixed;top:0;left:0;right:0;z-index:99;
  padding:96px clamp(20px,6vw,44px) 34px;
  background:rgba(7,11,20,.94);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(168,179,199,.1);
  transform:translateY(-102%);transition:transform .45s var(--ease);
  max-height:100svh;overflow-y:auto}
.mobile-nav.open{transform:translateY(0)}
.mobile-nav a{display:block;padding:15px 0;font-family:'General Sans',sans-serif;
  font-size:1.02rem;color:var(--titanium);border-bottom:1px solid rgba(168,179,199,.08);
  transition:color .3s,padding-left .3s}
.mobile-nav a:hover{color:var(--cyan);padding-left:8px}
.mobile-nav .m-cta{margin-top:24px;border:0;color:var(--ice);text-align:center;
  border:1px solid rgba(0,229,255,.34);border-radius:12px;background:rgba(0,229,255,.05)}
.mobile-nav .m-cta:hover{padding-left:0}
@media (max-width:860px){.nav-toggle{display:flex}}
/* Por debajo de 520px la cabecera no cabe: marca + idioma + CTA + hamburguesa
   suman más que el ancho de un iPhone SE. El CTA se oculta porque ya está
   dentro del menú móvil. */
@media (max-width:520px){.nav-cta{display:none}}
@media (min-width:861px){.mobile-nav{display:none}}

/* ---------- cabecera de página interior ---------- */
.page-hero{position:relative;z-index:2;max-width:960px;margin:0 auto;
  padding:clamp(120px,17vh,190px) clamp(20px,8vw,120px) clamp(30px,5vh,56px)}
.page-hero h1{font-weight:600;font-size:clamp(2rem,5vw,3.7rem);letter-spacing:-.03em;
  color:var(--ice);line-height:1.1;margin-bottom:26px}
.page-hero .lede{font-size:clamp(1.02rem,1.7vw,1.24rem);line-height:1.72;font-weight:300;
  max-width:70ch}
.page-hero .cta-row{margin-top:38px}
.page-hero--wide{max-width:1280px}

/* ---------- migas de pan ---------- */
.breadcrumb{position:relative;z-index:2;max-width:960px;margin:0 auto;
  padding:104px clamp(20px,8vw,120px) 0;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(168,179,199,.55)}
.breadcrumb--wide{max-width:1280px}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.breadcrumb li+li::before{content:'/';margin-right:9px;color:rgba(168,179,199,.3)}
.breadcrumb a{color:rgba(168,179,199,.75);transition:color .3s}
.breadcrumb a:hover{color:var(--cyan)}
.breadcrumb [aria-current="page"]{color:rgba(248,250,252,.75)}
.breadcrumb + .page-hero{padding-top:clamp(28px,5vh,52px)}

/* ---------- cuerpo de texto largo (prosa) ---------- */
.prose{position:relative;z-index:2;max-width:960px;margin:0 auto;
  padding:clamp(24px,4vh,44px) clamp(20px,8vw,120px) clamp(40px,6vh,70px)}
.prose > * + *{margin-top:22px}
.prose h2{font-weight:600;font-size:clamp(1.55rem,3vw,2.3rem);letter-spacing:-.025em;
  color:var(--ice);line-height:1.22;margin-top:clamp(46px,7vh,78px)}
.prose h3{font-family:'General Sans',sans-serif;font-weight:600;font-size:clamp(1.1rem,1.9vw,1.35rem);
  letter-spacing:-.012em;color:var(--ice);margin-top:clamp(30px,4vh,44px)}
.prose p{font-size:1.01rem;line-height:1.82;font-weight:300;max-width:74ch}
.prose p strong,.prose li strong{color:var(--ice);font-weight:500}
.prose ul,.prose ol{max-width:74ch;padding-left:22px}
.prose li{font-size:1.01rem;line-height:1.78;font-weight:300;margin-top:11px}
.prose li::marker{color:rgba(0,229,255,.6)}
.prose a:not(.btn-primary):not(.btn-ghost){color:var(--cyan);
  border-bottom:1px solid rgba(0,229,255,.28);transition:border-color .3s}
.prose a:not(.btn-primary):not(.btn-ghost):hover{border-color:var(--cyan)}
.prose .lede{font-size:clamp(1.06rem,1.7vw,1.2rem);line-height:1.75;color:rgba(248,250,252,.86);font-weight:300}

/* ---------- panel de vidrio genérico ---------- */
.glass{position:relative;overflow:hidden;border-radius:20px;
  padding:clamp(28px,4vw,40px);
  background:linear-gradient(160deg, rgba(248,250,252,.05), rgba(248,250,252,.014));
  border:1px solid rgba(168,179,199,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.glass::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.55),transparent);opacity:.6}
.glass h3:first-child,.glass h2:first-child{margin-top:0}

/* ---------- rejilla de servicios / casos ---------- */
.grid-sec{position:relative;z-index:2;max-width:1280px;margin:0 auto;
  padding:clamp(30px,5vh,60px) clamp(20px,8vw,120px) clamp(50px,8vh,100px)}
.grid-sec > h2{font-weight:600;font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:-.03em;
  color:var(--ice);margin-bottom:44px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:22px}
.tile{position:relative;overflow:hidden;border-radius:20px;padding:34px 30px 36px;display:block;
  background:linear-gradient(160deg, rgba(248,250,252,.05), rgba(248,250,252,.014));
  border:1px solid rgba(168,179,199,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease)}
.tile::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(0,229,255,.09), transparent 68%)}
.tile:hover{transform:translateY(-6px);border-color:rgba(0,229,255,.42);
  box-shadow:0 24px 70px -24px rgba(0,229,255,.16)}
.tile:hover::before{opacity:1}
.tile .idx{font-size:11px;letter-spacing:.28em;color:rgba(168,179,199,.5)}
.tile h3{font-weight:600;font-size:1.28rem;letter-spacing:-.012em;color:var(--ice);
  margin:12px 0 12px;line-height:1.28}
.tile p{font-size:.95rem;line-height:1.7;font-weight:300}
.tile .go{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan)}
.tile .go .arr{transition:transform .35s var(--ease)}
.tile:hover .go .arr{transform:translateX(5px)}
.tile .card-img{position:relative;margin:-34px -30px 22px;height:142px;overflow:hidden}
.tile .card-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.03);
  transition:transform 1s var(--ease)}
.tile:hover .card-img img{transform:scale(1.09)}
.tile .card-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(7,11,20,0) 46%, rgba(9,13,24,.92) 100%)}

/* Las tarjetas de servicio del home ahora son enlaces. Como son hijas directas
   de una rejilla el navegador ya las convierte en bloque, pero lo declaramos
   explícito para que no dependa de eso. */
a.card{display:block}

/* ---------- nota bajo una rejilla ---------- */
.grid-note{margin-top:28px;font-size:1rem;line-height:1.75;font-weight:300;max-width:74ch}
.grid-note strong{color:var(--ice);font-weight:500}
.grid-note a{color:var(--cyan);border-bottom:1px solid rgba(0,229,255,.28);transition:border-color .3s}
.grid-note a:hover{border-color:var(--cyan)}

/* ---------- chips de cobertura / stack ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.chip{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--titanium);
  border:1px solid rgba(168,179,199,.22);border-radius:999px;padding:7px 15px;
  background:rgba(248,250,252,.02)}
.chip--accent{color:var(--mint);border-color:rgba(54,245,199,.4);background:rgba(54,245,199,.05)}

/* ---------- FAQ (details/summary) ---------- */
.faq{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg, rgba(248,250,252,.045), rgba(248,250,252,.012));
  border:1px solid rgba(168,179,199,.12);
  transition:border-color .4s var(--ease)}
.faq details[open]{border-color:rgba(0,229,255,.32)}
.faq summary{list-style:none;cursor:pointer;padding:20px 26px;
  font-family:'General Sans',sans-serif;font-weight:500;font-size:1.01rem;color:var(--ice);
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--cyan)}
.faq summary::after{content:'+';flex:none;font-size:1.3rem;line-height:1;color:var(--cyan);
  transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 26px 22px;font-size:.98rem;line-height:1.78;font-weight:300;max-width:74ch}
.faq .a > * + *{margin-top:14px}

/* ---------- métricas de casos de estudio ---------- */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:26px}
.metric{border-radius:16px;padding:26px 24px;
  background:linear-gradient(160deg, rgba(67,56,202,.14), rgba(0,229,255,.04));
  border:1px solid rgba(168,179,199,.12)}
.metric .v{display:block;font-family:'General Sans',sans-serif;font-weight:600;
  font-size:clamp(1.3rem,2.4vw,1.85rem);color:var(--mint);letter-spacing:-.02em;line-height:1.2}
.metric .k{display:block;margin-top:10px;font-size:.86rem;line-height:1.6;
  font-weight:300;color:var(--titanium)}
/* marcador pendiente de completar por el cliente */
.todo{color:var(--mint);background:rgba(54,245,199,.08);
  border:1px dashed rgba(54,245,199,.45);border-radius:8px;
  padding:2px 9px;font-size:.86em;font-style:normal;letter-spacing:.01em}

/* ---------- bloque de enlaces relacionados ---------- */
.related{position:relative;z-index:2;max-width:1280px;margin:0 auto;
  padding:clamp(20px,4vh,40px) clamp(20px,8vw,120px) clamp(40px,6vh,70px)}
.related h2{font-weight:600;font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.025em;
  color:var(--ice);margin-bottom:26px}
.related-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.related-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border-radius:14px;
  background:rgba(248,250,252,.03);border:1px solid rgba(168,179,199,.12);
  font-size:.97rem;color:var(--titanium);line-height:1.5;
  transition:border-color .4s var(--ease),color .3s,background .4s}
.related-list a:hover{border-color:rgba(0,229,255,.42);color:var(--ice);background:rgba(0,229,255,.04)}
.related-list .arr{flex:none;color:var(--cyan)}

/* ---------- bloque CTA final de página interior ---------- */
.cta-block{position:relative;z-index:2;max-width:1280px;margin:0 auto;
  padding:0 clamp(20px,8vw,120px) clamp(56px,9vh,110px)}
.cta-inner{position:relative;overflow:hidden;border-radius:22px;text-align:center;
  padding:clamp(46px,7vw,72px) clamp(24px,5vw,60px);
  background:linear-gradient(120deg, rgba(67,56,202,.16), rgba(0,229,255,.05) 55%, rgba(54,245,199,.05));
  border:1px solid rgba(168,179,199,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.cta-inner::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(54,245,199,.5),transparent);opacity:.7}
.cta-inner h2{font-weight:600;font-size:clamp(1.7rem,3.6vw,2.7rem);letter-spacing:-.03em;
  color:var(--ice);line-height:1.18;margin-bottom:18px}
.cta-inner p{font-size:1.02rem;line-height:1.7;font-weight:300;max-width:56ch;margin:0 auto}
.cta-inner .cta-row{justify-content:center}

/* ---------- contacto ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:34px}
.contact-card{border-radius:20px;padding:34px 30px;
  background:linear-gradient(160deg, rgba(248,250,252,.05), rgba(248,250,252,.014));
  border:1px solid rgba(168,179,199,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.contact-card:hover{border-color:rgba(0,229,255,.4);box-shadow:0 20px 60px -26px rgba(0,229,255,.16)}
.contact-card h3{font-family:'General Sans',sans-serif;font-weight:600;font-size:1.18rem;
  color:var(--ice);margin-bottom:12px}
.contact-card p{font-size:.96rem;line-height:1.7;font-weight:300;margin-bottom:16px}
.contact-card a.big-link{font-family:'General Sans',sans-serif;font-size:1rem;color:var(--cyan);
  border-bottom:1px solid rgba(0,229,255,.3);transition:border-color .3s}
.contact-card a.big-link:hover{border-color:var(--cyan)}

/* ---------- 404 ---------- */
.notfound{position:relative;z-index:2;min-height:100svh;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(90px,12vh,140px) clamp(20px,8vw,120px)}
.notfound .code{font-family:'General Sans',sans-serif;font-weight:600;
  font-size:clamp(4rem,15vw,9rem);line-height:1;letter-spacing:-.05em;margin-bottom:22px}
.notfound h1{font-weight:600;font-size:clamp(1.5rem,3.4vw,2.4rem);letter-spacing:-.028em;
  color:var(--ice);margin-bottom:18px}
.notfound p{font-size:1.02rem;line-height:1.7;font-weight:300;max-width:52ch}

/* ---------- respeto por movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
  .manifesto-text .w{color:var(--ice)}
  .manifesto-text .w.g{background:linear-gradient(100deg,var(--indigo),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
}