/* ============================================================
   AURLINE · RED NEURONAL DE SERVICIOS + PÁGINA DE DETALLE
   Se carga después de aurline.css. Estética: futurista, sobria,
   sobre verde profundo con acento oro.
   ============================================================ */

/* ---------- intro de la página de servicios ---------- */
.svc-intro{
  background:linear-gradient(rgba(15,42,46,.5),rgba(15,42,46,.5)), url('astrolabio-bg-opt.jpg') center/cover no-repeat, var(--forest); color:#fff; position:relative; overflow:hidden;
  padding:calc(96px + clamp(40px,8vh,80px)) 0 clamp(40px,6vh,72px);
}
.svc-intro__glow{ position:absolute; left:50%; top:-20%; width:70vw; height:70vw; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(205,180,137,.13), transparent 60%); pointer-events:none; }
.svc-intro__crumb{ font-family:var(--sans); font-size:.78rem; letter-spacing:.04em; color:var(--mist-soft); }
.svc-intro__crumb a{ color:var(--sand); }
.svc-intro h1{ color:#fff; max-width:18ch; margin-top:.3em; }
.svc-intro h1 .em{ font-family:var(--serif); font-style:italic; font-weight:300; color:var(--sand); }
.svc-intro .lead{ color:var(--mist); max-width:56ch; margin-top:22px; }

/* ============================================================
   RED NEURONAL
   ============================================================ */
.red{ background:var(--forest); color:var(--mist); position:relative; overflow:hidden;
  padding:0 0 clamp(48px,7vh,90px); }
.red__sky{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 72% 18%, rgba(205,180,137,.10), transparent 60%),
    radial-gradient(50vw 50vw at 24% 86%, rgba(61,107,99,.18), transparent 62%); }
.red__hint{ text-align:center; position:relative; z-index:3; padding:6px var(--pad) clamp(18px,3vh,34px); }
.red__hint .kicker{ color:var(--sand); }
.red__hint p{ color:var(--mist); margin:.7em auto 0; max-width:42ch; font-size:.98rem; }

/* ---------- escenarios de decisión ---------- */
.red-scen{ margin-top:20px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.red-scen__k{ font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mist-soft); }
.red-scen__chips{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.red-scen__chip{ font-family:var(--sans); font-size:.85rem; font-weight:500; color:var(--mist);
  background:rgba(255,255,255,.04); border:1px solid rgba(205,180,137,.32); border-radius:100px;
  padding:10px 19px; cursor:pointer; transition:.3s var(--ease); }
.red-scen__chip:hover{ border-color:var(--sand); color:#fff; transform:translateY(-1px); }
.red-scen__chip.on{ background:var(--sand); border-color:var(--sand); color:var(--forest); font-weight:600; }
@media (max-width:860px){ .red-scen{ display:none; } }
@media (prefers-reduced-motion:reduce){ .red-scen__chip{ transition:none; } }

/* ---------- tarjeta flotante de servicio (escritorio) ---------- */
.red-tip2{ position:fixed; left:0; top:0; z-index:130; width:278px; pointer-events:none;
  background:var(--forest-2); border:1px solid rgba(205,180,137,.38); border-radius:4px;
  padding:15px 17px; opacity:0; transition:opacity .25s ease;
  box-shadow:0 16px 44px rgba(0,0,0,.38); }
.red-tip2.on{ opacity:1; }
.red-tip2 b{ font-family:var(--sans); font-weight:600; color:#fff; font-size:.96rem; display:block; }
.red-tip2 span{ display:block; color:var(--mist); font-size:.85rem; line-height:1.45; margin-top:6px; }
.red-tip2 em{ font-style:normal; font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sand); display:block; margin-top:11px; }
@media (pointer:coarse){ .red-tip2{ display:none; } }

/* lienzo escritorio */
.red__canvas{
  position:relative; z-index:2;
  width:min(1180px, 94vw); margin:0 auto;
  aspect-ratio:1000/660;
}
.red__svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; }
.syn{ fill:none; stroke:rgba(205,180,137,.42); stroke-width:1.1; vector-effect:non-scaling-stroke;
  stroke-linecap:round; transition:stroke .4s var(--ease), stroke-width .4s var(--ease), opacity .4s; }
.syn.drawn{ }
.syn.is-hot{ stroke:rgba(205,180,137,.95); stroke-width:1.6; }
.syn.is-dim{ stroke:rgba(205,180,137,.16); }
/* pulso viajero sutil sobre las conexiones del hub */
.syn--pulse{ stroke:var(--sand); stroke-width:1.6; opacity:.0; }

/* nodos · el ancla geométrica (x,y) es el punto luminoso; el rótulo flota aparte */
.nnode{ position:absolute; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  text-align:center; cursor:pointer; background:none; border:0; padding:0;
  color:inherit; font-family:inherit; z-index:4;
  -webkit-tap-highlight-color:transparent; }
.nnode__inner{ position:relative; display:grid; place-items:center;
  animation:nodeFloat var(--float,7s) var(--ease) infinite alternate; }
.nnode__cap{ position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:22ch; display:flex; flex-direction:column; align-items:center; gap:3px;
  pointer-events:none; }
.nnode--capup .nnode__cap{ top:auto; bottom:calc(100% + 12px); }
.nnode__core{ position:relative; display:block; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f4e6c6, var(--sand-deep) 62%, #8f7647);
  box-shadow:0 0 0 1px rgba(205,180,137,.35), 0 0 18px 2px rgba(205,180,137,.0);
  transition:box-shadow .5s var(--ease), transform .45s var(--ease);
  opacity:0; transform:scale(.2); }
.nnode__ring{ position:absolute; inset:50%; width:0; height:0; border-radius:50%;
  border:1px solid rgba(205,180,137,.45); transform:translate(-50%,-50%);
  opacity:0; transition:opacity .6s, width .6s var(--ease), height .6s var(--ease); }
.nnode__ring2{ border-color:rgba(205,180,137,.20); }

/* tamaños por jerarquía */
.nnode--core .nnode__core{ width:20px; height:20px; }
.nnode--support .nnode__core{ width:13px; height:13px; }
.nnode--hub .nnode__core{ width:30px; height:30px;
  background:radial-gradient(circle at 38% 34%, #fff5df, var(--sand) 55%, #a98a55); }

/* etiquetas */
.nnode__no{ font-family:var(--sans); font-size:.62rem; font-weight:600; letter-spacing:.22em;
  color:var(--sand); opacity:0; transition:opacity .5s; }
.nnode__label{ font-family:var(--sans); font-weight:600; letter-spacing:-.005em; line-height:1.1;
  color:#fff; opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.nnode--core .nnode__label{ font-size:clamp(.98rem,1.25vw,1.18rem); }
.nnode--support .nnode__label{ font-size:clamp(.86rem,1vw,1rem); color:var(--mist); }
.nnode--hub .nnode__label{ font-size:clamp(1.05rem,1.5vw,1.4rem); letter-spacing:.02em; }
.nnode__sub{ font-family:var(--body); font-size:.8rem; color:var(--mist-soft); max-width:18ch;
  opacity:0; transition:opacity .6s; margin-top:-2px; }
.nnode--hub .nnode__sub{ color:var(--sand-deep); }
.nnode__enter{ font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sand); margin-top:8px;
  border:1px solid rgba(205,180,137,.4); border-radius:100px; padding:6px 14px;
  display:inline-flex; align-items:center; gap:.55em; opacity:0; transform:translateY(4px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), background .3s, color .3s; }
.nnode--hub.is-on .nnode__enter{ opacity:.92; transform:none; }
.nnode--hub .nnode__enter .ar{ transition:transform .3s var(--ease); }
.nnode--hub:hover .nnode__enter,
.nnode--hub:focus-visible .nnode__enter{ background:var(--sand); color:var(--forest); border-color:var(--sand); }
.nnode--hub:hover .nnode__enter .ar,
.nnode--hub:focus-visible .nnode__enter .ar{ transform:translateX(4px); }
.nnode--hub:hover .nnode__core,
.nnode--hub:focus-visible .nnode__core{ transform:scale(1.18); }

/* warp de salida hacia "Criterio Aurline" */
.red-warp{ position:fixed; inset:0; z-index:120; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(205,180,137,.55), rgba(205,180,137,.12) 24%, rgba(15,42,46,0) 46%);
  opacity:0; transform:scale(.2); transform-origin:50% 50%;
  transition:opacity .8s var(--ease), transform 1s var(--ease); }
.red-warp.on{ opacity:1; transform:scale(3); }

/* aparición (activado por JS al entrar en viewport) */
.nnode.is-on .nnode__core{ opacity:1; transform:scale(1);
  box-shadow:0 0 0 1px rgba(205,180,137,.5), 0 0 22px 3px rgba(205,180,137,.28); }
.nnode.is-on .nnode__ring{ opacity:1; width:46px; height:46px; }
.nnode--support.is-on .nnode__ring{ width:34px; height:34px; }
.nnode--hub.is-on .nnode__ring{ width:64px; height:64px; }
.nnode.is-on .nnode__ring2{ width:70px; height:70px; }
.nnode--hub.is-on .nnode__ring2{ width:96px; height:96px; }
.nnode.is-on .nnode__no,
.nnode.is-on .nnode__label,
.nnode.is-on .nnode__sub{ opacity:1; transform:none; }

/* pulso de núcleo cuando está activo */
.nnode.is-on .nnode__core::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1px solid rgba(205,180,137,.5); animation:corePulse 3.4s ease-out infinite; }
.nnode--support.is-on .nnode__core::after{ display:none; }

/* hover / foco · microinteracción */
.nnode:hover .nnode__inner,
.nnode:focus-visible .nnode__inner{ animation-play-state:paused; }
.nnode:hover .nnode__core,
.nnode:focus-visible .nnode__core{ transform:scale(1.28);
  box-shadow:0 0 0 1px var(--sand), 0 0 34px 6px rgba(205,180,137,.5); }
.nnode:hover .nnode__label,
.nnode:focus-visible .nnode__label{ color:var(--sand); }
.nnode:focus-visible{ outline:none; }
.nnode:focus-visible .nnode__ring{ border-color:#fff; }
.red__canvas.has-hot .nnode:not(.is-hot){ opacity:.4; transition:opacity .4s; }
.red__canvas.has-hot .nnode.is-hot{ opacity:1; }

@keyframes nodeFloat{ from{ transform:translateY(-5px); } to{ transform:translateY(6px); } }
@keyframes corePulse{ 0%{ transform:scale(1); opacity:.7; } 70%{ opacity:0; } 100%{ transform:scale(2.4); opacity:0; } }

/* ---------- versión móvil: secuencia vertical conectada ---------- */
.red-mobile{ display:none; }
@media (max-width:860px){
  .red__canvas, .red__hint p{ display:none; }
  .red-mobile{ display:block; position:relative; z-index:2; padding:8px var(--pad) 0; }
  .red-mobile__spine{ position:absolute; left:calc(var(--pad) + 13px); top:30px; bottom:30px; width:1px;
    background:linear-gradient(var(--sand-deep), rgba(205,180,137,.15)); }
  .mnode{ position:relative; display:grid; grid-template-columns:28px 1fr; gap:18px; align-items:start;
    padding:16px 0; color:inherit; }
  /* estado final VISIBLE por defecto · la entrada es solo mejora (ver bloque de animación) */
  .mnode__dot{ width:14px; height:14px; margin:6px 0 0 7px; border-radius:50%;
    background:radial-gradient(circle at 38% 34%, #f4e6c6, var(--sand-deep) 62%, #8f7647);
    box-shadow:0 0 0 4px var(--forest), 0 0 0 5px rgba(205,180,137,.4), 0 0 18px 3px rgba(205,180,137,.3); }
  .mnode--support .mnode__dot{ width:10px; height:10px; margin-left:9px; }
  /* núcleo "Criterio Aurline" · entrada al criterio desde móvil */
  .mnode--hub{ padding-top:6px; padding-bottom:26px; margin-bottom:6px;
    border-bottom:1px solid rgba(205,180,137,.16); }
  .mnode--hub .mnode__dot{ width:22px; height:22px; margin:2px 0 0 3px;
    background:radial-gradient(circle at 38% 34%, #fff5df, var(--sand) 55%, #a98a55);
    box-shadow:0 0 0 4px var(--forest), 0 0 0 5px rgba(205,180,137,.55), 0 0 24px 5px rgba(205,180,137,.35); }
  .mnode--hub .mnode__no{ color:var(--sand); }
  .mnode--hub .mnode__t{ font-size:1.34rem; }
  .mnode__enter-m{ display:inline-flex; align-items:center; gap:.55em; margin-top:14px; min-height:44px;
    font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    color:var(--sand); border:1px solid rgba(205,180,137,.42); border-radius:100px; padding:0 18px; }
  .mnode__enter-m .arr{ transition:transform .3s var(--ease); }
  .mnode--hub:active .mnode__enter-m{ background:rgba(205,180,137,.1); }
  .mnode__no{ font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.22em; color:var(--sand); }
  .mnode__t{ font-family:var(--sans); font-size:1.18rem; font-weight:600; color:#fff; margin:.25em 0 .35em;
    display:inline-flex; align-items:center; gap:.5em; }
  .mnode__t .arr{ color:var(--sand); transition:transform .3s var(--ease); }
  .mnode:active .mnode__t .arr{ transform:translateX(4px); }
  .mnode__d{ font-size:.95rem; color:var(--mist); margin:0; line-height:1.5; max-width:46ch; }
  .mnode__body{ opacity:1; }
}

/* CTA inferior de la red */
.red__foot{ position:relative; z-index:3; text-align:center; margin-top:clamp(20px,4vh,46px); padding:0 var(--pad); }

/* ============================================================
   PÁGINA DE DETALLE DE SERVICIO  (servicio.html)
   ============================================================ */
.sd-hero{ background:linear-gradient(rgba(15,42,46,.5),rgba(15,42,46,.5)), url('astrolabio-bg-opt.jpg') center/cover no-repeat, var(--forest); color:#fff; position:relative; overflow:hidden;
  padding:calc(96px + clamp(46px,9vh,96px)) 0 clamp(54px,9vh,104px); }
.sd-hero__glow{ position:absolute; right:-12%; top:-26%; width:60vw; height:60vw;
  background:radial-gradient(circle, rgba(205,180,137,.16), transparent 60%); pointer-events:none; }
.sd-hero .wrap{ position:relative; }
.sd-hero__crumb{ font-family:var(--sans); font-size:.8rem; letter-spacing:.03em; color:var(--mist-soft); }
.sd-hero__crumb a{ color:var(--sand); }
.sd-hero__crumb a:hover{ text-decoration:underline; }
.sd-hero__no{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--sand); margin-top:22px; display:block; }
.sd-hero h1{ color:#fff; max-width:16ch; margin-top:.18em;
  font-size:clamp(2.4rem,5.4vw,4.4rem); letter-spacing:-.028em; line-height:1; }
.sd-hero__short{ color:var(--mist); max-width:52ch; margin-top:24px;
  font-size:clamp(1.12rem,1.7vw,1.42rem); line-height:1.5; }
.sd-hero__chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.sd-chip{ font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:.01em;
  border:1px solid rgba(205,180,137,.34); color:var(--mist); padding:6px 13px; border-radius:100px; }

/* franja de "qué es" */
.sd-lead{ padding:clamp(56px,9vh,110px) 0; }
.sd-lead__q{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.3; letter-spacing:-.01em; text-wrap:balance; max-width:24ch; }

/* bloques problema / valor */
.sd-split{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px;
  background:var(--paper-3); border:1px solid var(--paper-3); border-radius:4px; overflow:hidden; }
@media (max-width:760px){ .sd-split{ grid-template-columns:1fr; } }
.sd-block{ background:var(--paper); padding:clamp(30px,4vw,48px); }
.sd-block__k{ font-family:var(--sans); font-size:.74rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--sand-text); display:flex; align-items:center; gap:.7em; }
.sd-block__k::before{ content:""; width:7px; height:7px; background:var(--sand); transform:rotate(45deg); flex:none; }
.sd-block__t{ font-family:var(--sans); font-size:clamp(1.2rem,1.9vw,1.6rem); font-weight:600;
  letter-spacing:-.015em; margin:16px 0 12px; }
.sd-block p{ color:var(--ink-soft); margin:0; line-height:1.6; }

/* cuándo contratarlo · lista oscura */
.sd-when{ background:linear-gradient(rgba(10,31,34,.5),rgba(10,31,34,.5)), url('astrolabio-bg-opt.jpg') center/cover no-repeat, var(--forest-2); color:var(--mist); }
.sd-when__list{ list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
@media (max-width:820px){ .sd-when__list{ grid-template-columns:1fr; } }
.sd-when__list li{ background:rgba(255,255,255,.02); border:1px solid rgba(205,180,137,.16); border-radius:3px;
  padding:28px 26px; display:flex; flex-direction:column; gap:14px; }
.sd-when__n{ font-family:var(--sans); font-size:1.6rem; font-weight:600; color:var(--sand); line-height:1; letter-spacing:-.02em; }
.sd-when__list p{ margin:0; color:var(--mist); line-height:1.55; }

/* entregables */
.sd-deliv__list{ list-style:none; margin:30px 0 0; padding:0; max-width:920px; }
.sd-deliv__list li{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding:22px 0; border-top:1px solid var(--paper-3); color:var(--ink-soft); line-height:1.55; }
.sd-deliv__list li::before{ content:""; width:9px; height:9px; margin-top:.5em; flex:none;
  border:1.5px solid var(--sand-deep); background:var(--paper); transform:rotate(45deg); }

/* navegación entre servicios */
.sd-nav{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--paper-3); padding-top:30px; margin-top:clamp(40px,6vh,70px); }
.sd-nav a{ font-family:var(--sans); font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:.6em;
  font-size:1.02rem; transition:color .25s; }
.sd-nav a:hover{ color:var(--sand-text); }
.sd-nav a .dir{ color:var(--sand-text); }

/* reveal con profundidad (Apple-style) reutiliza .reveal de aurline.css;
   añadimos variantes de escala/parallax. Visible sin JS: solo se oculta
   para animar cuando html.js confirma que JS está activo. */
.rise{ transition:opacity 1s var(--ease), transform 1s var(--ease); }
html.js .rise:not(.in){ opacity:0; transform:translateY(40px) scale(.985); }
.rise.in{ opacity:1; transform:none; }
.rise.d1{ transition-delay:.1s; } .rise.d2{ transition-delay:.2s; } .rise.d3{ transition-delay:.3s; } .rise.d4{ transition-delay:.4s; }
html.reveal-all .rise{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  .nnode__core,.nnode__ring,.nnode__ring2,.nnode__no,.nnode__label,.nnode__sub{ opacity:1 !important; transform:translate(-50%,-50%) !important; }
  .nnode__core{ transform:scale(1) !important; }
  .nnode__inner{ animation:none !important; }
  .mnode__dot,.mnode__body{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   Detalle de servicio · capa de movimiento de nivel superior
   ============================================================ */

/* chips del hero: entrada escalonada (delay inline desde servicio.js) */
html.js .sd-chip{ opacity:0; transform:translateY(12px);
  transition:opacity .8s var(--ease), transform .8s var(--ease); }
body.hero-go .sd-chip{ opacity:1; transform:none; }

/* bloques problema/valor: filo dorado que se traza al revelarse */
html.js .sd-block{ position:relative; overflow:hidden; }
html.js .sd-block::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--sand-deep), var(--sand));
  transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease) .25s; z-index:1; }
html.js .sd-split.in .sd-block::before{ transform:scaleX(1); }
html.js .sd-split.in .sd-block:nth-child(2)::before{ transition-delay:.55s; }

/* cuándo contratarlo: keyline + número que asciende enmascarado */
html.js .sd-when__list li{ overflow:hidden; transition:opacity 1s var(--ease), transform 1s var(--ease), border-color .6s; }
html.js .sd-when__list li.in{ border-color:rgba(205,180,137,.3); }
html.js .sd-when__n{ display:inline-block; transform:translateY(120%); opacity:0;
  transition:transform .85s var(--ease) .25s, opacity .85s var(--ease) .25s; }
html.js .sd-when__list li.in .sd-when__n{ transform:none; opacity:1; }
html.js .sd-when__list li p{ opacity:0; transform:translateY(10px);
  transition:opacity .85s var(--ease) .4s, transform .85s var(--ease) .4s; }
html.js .sd-when__list li.in p{ opacity:1; transform:none; }

/* entregables: hairline trazada + rombo que aparece */
html.js .sd-deliv__list li{ position:relative; border-top-color:transparent; }
html.js .sd-deliv__list li::after{ content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:var(--paper-3); transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease); }
html.js .sd-deliv__list li.in::after{ transform:scaleX(1); }
html.js .sd-deliv__list li::before{ transform:rotate(45deg) scale(0);
  transition:transform .55s var(--ease) .35s; }
html.js .sd-deliv__list li.in::before{ transform:rotate(45deg) scale(1); }

/* navegación entre servicios: flechas vivas */
.sd-nav a .dir{ display:inline-block; transition:transform .35s var(--ease); }
.sd-nav a:hover .dir{ transform:translateX(4px); }
.sd-nav a:first-child:hover .dir{ transform:translateX(-4px); }

@media (prefers-reduced-motion:reduce){
  html.js .sd-chip{ opacity:1; transform:none; transition:none; }
  html.js .sd-block::before{ transform:scaleX(1); transition:none; }
  html.js .sd-when__list li{ transition:none; }
  html.js .sd-when__n, html.js .sd-when__list li p{ opacity:1; transform:none; transition:none; }
  html.js .sd-deliv__list li{ border-top-color:var(--paper-3); }
  html.js .sd-deliv__list li::after{ display:none; }
  html.js .sd-deliv__list li::before{ transform:rotate(45deg) scale(1); transition:none; }
  .sd-nav a .dir{ transition:none; }
}