/* ============================================================
   AURLINE · PÁGINA "CRITERIO AURLINE" (red neuronal del criterio)
   Se carga tras aurline.css. Estética boutique: verde profundo,
   nodos luminosos, líneas finas, tipografía limpia.
   ============================================================ */

body.criterio{ background:var(--forest-2); }

/* ---------- transición de entrada (continúa el zoom desde Servicios) ---------- */
.cn-warp{ position:fixed; inset:0; z-index:120; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(205,180,137,.35), rgba(15,42,46,.0) 38%, var(--forest-2) 72%);
  opacity:1; transition:opacity 1.1s var(--ease); }
.cn-warp.gone{ opacity:0; }

/* ---------- cabecera mínima de la vista ---------- */
.cn-top{ position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px var(--pad); pointer-events:none; }
.cn-top > *{ pointer-events:auto; }
.cn-back{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--sans);
  font-size:.86rem; font-weight:600; letter-spacing:.02em; color:var(--mist);
  background:rgba(10,31,34,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(205,180,137,.28); border-radius:100px; padding:9px 17px; cursor:pointer;
  transition:.28s var(--ease); }
.cn-back:hover{ color:var(--forest); background:var(--sand); border-color:var(--sand); }
.cn-back .a{ transition:transform .3s var(--ease); }
.cn-back:hover .a{ transform:translateX(-4px); }
.cn-brand{ display:flex; align-items:center; gap:10px; font-family:var(--sans); color:#fff; }
.cn-brand img{ height:30px; width:auto; display:block; }
.cn-brand span{ font-size:.96rem; letter-spacing:.18em; font-weight:600; }
.cn-brand sup{ font-size:.5em; letter-spacing:.1em; color:var(--sand); }
@media (max-width:560px){ .cn-brand span{ display:none; } }

/* ---------- escena ---------- */
.cn{ position:relative; min-height:100svh; overflow:hidden;
  display:grid; place-items:center; padding:64px 0 0; }
.cn__sky{ position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(40vw 40vw at 50% 46%, rgba(205,180,137,.10), transparent 60%),
    radial-gradient(60vw 60vw at 82% 12%, rgba(61,107,99,.16), transparent 60%),
    radial-gradient(60vw 60vw at 16% 92%, rgba(61,107,99,.14), transparent 62%); }

/* título flotante (esquina) */
.cn-lead{ position:absolute; left:var(--pad); bottom:clamp(20px,4vh,40px); z-index:5; max-width:30ch;
  pointer-events:none; }
.cn-lead .kicker{ color:var(--sand); }
.cn-lead h1{ color:#fff; font-size:clamp(1.5rem,2.6vw,2.2rem); letter-spacing:-.02em; margin:.45em 0 .3em; }
.cn-lead p{ color:var(--mist); font-size:.96rem; margin:0; line-height:1.5; max-width:34ch; }
@media (max-width:820px){ .cn-lead{ display:none; } }

/* lienzo cuadrado de la red */
.cn-stage{ position:relative; z-index:2;
  width:min(94vw, 84vh, 1120px); aspect-ratio:1/1;
  will-change:transform; transition:transform .45s var(--ease); }
.cn-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1;
  animation:cnBreathe 7s ease-in-out infinite; }
@keyframes cnBreathe{ 0%,100%{ opacity:.78; } 50%{ opacity:1; } }

.cn-line{ fill:none; stroke:rgba(205,180,137,.26); stroke-width:1; vector-effect:non-scaling-stroke;
  transition:stroke .35s var(--ease), stroke-width .35s var(--ease), opacity .35s;
  stroke-dasharray:var(--len); stroke-dashoffset:0; }
/* draw progresivo sólo mientras .intro (visible por defecto) */
.cn-stage.intro .cn-line{ animation:cnDraw 1s var(--ease) both; animation-delay:var(--ad,0s); }
@keyframes cnDraw{ from{ stroke-dashoffset:var(--len); } to{ stroke-dashoffset:0; } }
.cn-line.hot{ stroke:rgba(205,180,137,.92); stroke-width:1.5; }
.cn-line.dim{ stroke:rgba(205,180,137,.06); }

/* nodos */
.cnode{ position:absolute; transform:translate(-50%,-50%);
  display:grid; place-items:center; z-index:4; cursor:default; }
.cnode__dot{ position:relative; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #f4e6c6, var(--sand-deep) 60%, #8f7647);
  box-shadow:0 0 0 1px rgba(205,180,137,.35); cursor:pointer;
  opacity:1; transform:scale(1); transition:transform .4s var(--ease), box-shadow .4s; }
/* reveal: visible por defecto; se anima DESDE oculto sólo mientras .intro */
.cn-stage.intro .cnode__dot{ animation:cnodeIn .6s var(--ease) both; animation-delay:var(--ad,0s); }
@keyframes cnodeIn{ from{ opacity:0; transform:scale(.1); } to{ opacity:1; transform:scale(1); } }
.cnode__lbl{ position:absolute; left:50%; transform:translateX(-50%);
  font-family:var(--sans); font-weight:500; letter-spacing:.005em; line-height:1.15;
  color:var(--mist); white-space:nowrap; opacity:0; transition:opacity .5s, color .3s; pointer-events:none; }
/* sólo el núcleo y los valores fundacionales muestran rótulo en reposo */
.cnode--core .cnode__lbl, .cnode--L0 .cnode__lbl{ opacity:.85; }
.cn-stage.intro .cnode--core .cnode__lbl, .cn-stage.intro .cnode--L0 .cnode__lbl{ animation:lblIn .7s var(--ease) both; animation-delay:var(--ad,0s); }
@keyframes lblIn{ from{ opacity:0; } to{ opacity:.6; } }
.cnode--down .cnode__lbl{ top:calc(50% + var(--gap)); }
.cnode--up   .cnode__lbl{ bottom:calc(50% + var(--gap)); }

/* tamaños por capa */
.cnode--core .cnode__dot{ width:34px; height:34px;
  background:radial-gradient(circle at 38% 34%, #fff6e0, var(--sand) 52%, #a98a55);
  box-shadow:0 0 0 1px rgba(205,180,137,.6), 0 0 30px 6px rgba(205,180,137,.3); }
.cnode--core{ z-index:6; }
.cnode--L0 .cnode__dot{ width:15px; height:15px; }   /* valores */
.cnode--L1 .cnode__dot{ width:12px; height:12px; }   /* método */
.cnode--L2 .cnode__dot{ width:11px; height:11px; }   /* procesos */
.cnode--L3 .cnode__dot{ width:10px; height:10px; }   /* relación */
.cnode--L4 .cnode__dot{ width:9px;  height:9px;  }   /* diferencial */
.cnode__lbl{ --gap:11px; font-size:.74rem; }
.cnode--core .cnode__lbl{ font-size:1rem; font-weight:600; color:#fff; --gap:18px; letter-spacing:.04em; }
.cnode--L0 .cnode__lbl{ font-size:.78rem; --gap:13px; }

/* halo del núcleo */
.cnode--core .cnode__dot::after{ content:""; position:absolute; inset:-10px; border-radius:50%;
  border:1px solid rgba(205,180,137,.45); animation:cnCore 3.6s ease-out infinite; }
@keyframes cnCore{ 0%{ transform:scale(.9); opacity:.7; } 70%{ opacity:0; } 100%{ transform:scale(2.2); opacity:0; } }

/* hover / activo */
.cnode__dot:hover, .cnode.is-active .cnode__dot{ transform:scale(1.5);
  box-shadow:0 0 0 1px var(--sand), 0 0 26px 6px rgba(205,180,137,.55); }
.cnode.is-active .cnode__lbl{ opacity:1; color:#fff; }
.cn-stage.has-active .cnode:not(.is-active):not(.is-near) .cnode__dot{ opacity:.32; }
.cn-stage.has-active .cnode:not(.is-active):not(.is-near) .cnode__lbl{ opacity:.16; }
.cn-stage.has-active .cnode.is-near .cnode__lbl{ opacity:.85; }

/* flotación sutil de cada nodo (no en el núcleo) */
.cnode__inner{ display:contents; }
.cnode--ring{ animation:cnFloat var(--fl,8s) var(--ease) infinite alternate; }
@keyframes cnFloat{ from{ margin-top:-3px; } to{ margin-top:4px; } }

/* ---------- tarjeta flotante (quote) ---------- */
.cn-tip{ position:fixed; z-index:80; max-width:300px; pointer-events:none;
  background:rgba(10,31,34,.82); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(205,180,137,.32); border-radius:6px; padding:18px 20px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
  opacity:0; transform:translateY(8px) scale(.98); transition:opacity .26s var(--ease), transform .26s var(--ease); }
.cn-tip.on{ opacity:1; transform:none; }
.cn-tip__k{ font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sand); display:flex; align-items:center; gap:.6em; margin-bottom:11px; }
.cn-tip__k::before{ content:""; width:6px; height:6px; background:var(--sand); transform:rotate(45deg); flex:none; }
.cn-tip__t{ font-family:var(--sans); font-weight:600; color:#fff; font-size:1.04rem;
  letter-spacing:-.01em; margin:-3px 0 9px; }
.cn-tip__q{ font-family:var(--serif); font-style:italic; font-weight:400; color:#fff;
  font-size:1.06rem; line-height:1.4; margin:0; text-wrap:pretty; }
.cn-tip__by{ font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--mist);
  margin-top:12px; letter-spacing:.02em; }
.cn-tip__by::before{ content:""; color:var(--sand-deep); }

/* ============================================================
   VERSIÓN MÓVIL / TABLET ESTRECHO · capas verticales premium
   Hero del núcleo · navegación de capas pegajosa (scrollspy) ·
   secciones de capa plegables · fichas-cita con aire.
   ============================================================ */
.cn-mobile{ display:none; }
@media (max-width:820px){
  .cn-stage{ display:none; }
  .cn{ display:block; padding:0; min-height:auto; }
  .cn-mobile{ display:block; position:relative; z-index:2;
    padding:clamp(78px,12vh,104px) var(--pad) clamp(48px,8vh,72px);
    width:min(100%, 720px); min-width:0; margin:0 auto; }

  /* ---- hero del núcleo ---- */
  .cn-core-m{ display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:18px; padding:0 0 clamp(26px,5vh,40px); }
  .cn-core-m__dot{ width:34px; height:34px; border-radius:50%; position:relative;
    background:radial-gradient(circle at 38% 34%, #fff6e0, var(--sand) 52%, #a98a55);
    box-shadow:0 0 0 1px rgba(205,180,137,.6), 0 0 30px 7px rgba(205,180,137,.32); }
  .cn-core-m__k{ font-family:var(--sans); font-size:.7rem; font-weight:600; letter-spacing:.26em;
    text-transform:uppercase; color:var(--sand); }
  .cn-core-m__t{ font-family:var(--sans); font-size:clamp(1.6rem,6.4vw,2.1rem); font-weight:600;
    color:#fff; letter-spacing:-.01em; line-height:1.05; margin:0; }
  .cn-core-m__q{ font-family:var(--serif); font-style:italic; color:var(--mist);
    font-size:clamp(1.08rem,4.4vw,1.28rem); line-height:1.45; max-width:32ch; margin:0; text-wrap:pretty; }
  .cn-core-m__by{ font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.04em;
    color:var(--sand-deep); }
  .cn-core-m__by::before{ content:""; }

  /* ---- navegación de capas (sticky scrollspy) ---- */
  .cn-nav{ position:sticky; top:0; z-index:20;
    display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; scroll-snap-type:x proximity;
    margin:0 calc(var(--pad) * -1); padding:12px var(--pad);
    background:linear-gradient(var(--forest-2) 72%, rgba(10,31,34,0));
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
  .cn-nav::-webkit-scrollbar{ display:none; }
  .cn-nav__pill{ flex:none; scroll-snap-align:start;
    display:inline-flex; align-items:center; gap:.55em; min-height:40px;
    font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.01em;
    color:var(--mist); background:rgba(255,255,255,.03);
    border:1px solid rgba(205,180,137,.22); border-radius:100px; padding:0 16px;
    cursor:pointer; white-space:nowrap; transition:color .25s, background .25s, border-color .25s; }
  .cn-nav__pill .ix{ font-size:.72rem; color:var(--sand-deep); letter-spacing:.08em; }
  .cn-nav__pill.active{ color:var(--forest); background:var(--sand); border-color:var(--sand); }
  .cn-nav__pill.active .ix{ color:var(--forest); opacity:.7; }

  /* ---- sección de capa (plegable) ---- */
  .cn-layer{ border-top:1px solid rgba(205,180,137,.16); scroll-margin-top:76px; }
  .cn-layer:first-of-type{ border-top:0; }
  .cn-layer__h{ all:unset; box-sizing:border-box; display:flex; align-items:flex-start; gap:16px;
    width:100%; cursor:pointer; padding:clamp(22px,4vh,30px) 0 clamp(18px,3vh,22px);
    -webkit-tap-highlight-color:transparent; }
  .cn-layer__ix{ font-family:var(--sans); font-size:.82rem; font-weight:600; letter-spacing:.08em;
    color:var(--sand); padding-top:.35em; flex:none; min-width:1.8em; }
  .cn-layer__txt{ flex:1; display:flex; flex-direction:column; gap:5px; }
  .cn-layer__name{ font-family:var(--sans); font-size:clamp(1.18rem,5vw,1.4rem); font-weight:600;
    color:#fff; letter-spacing:-.01em; line-height:1.12; }
  .cn-layer__meta{ font-family:var(--sans); font-size:.8rem; font-weight:500; letter-spacing:.02em;
    color:var(--mist-soft); }
  .cn-layer__tog{ flex:none; width:34px; height:34px; border-radius:50%;
    border:1px solid rgba(205,180,137,.3); display:grid; place-items:center; margin-top:2px;
    color:var(--sand); position:relative; transition:border-color .25s, background .25s; }
  .cn-layer__tog::before,.cn-layer__tog::after{ content:""; position:absolute; background:currentColor;
    border-radius:2px; transition:transform .3s var(--ease), opacity .3s; }
  .cn-layer__tog::before{ width:13px; height:1.8px; }
  .cn-layer__tog::after{ width:1.8px; height:13px; }
  .cn-layer.open .cn-layer__tog{ background:rgba(205,180,137,.12); border-color:rgba(205,180,137,.5); }
  .cn-layer.open .cn-layer__tog::after{ transform:scaleY(0); opacity:0; }

  /* panel plegable: toggle por display (a prueba de fallos en cualquier navegador) */
  .cn-layer__panel{ display:none; }
  .cn-layer.open .cn-layer__panel{ display:block; }
  .cn-layer__panelin{ min-height:0; }
  .cn-layer__list{ display:flex; flex-direction:column; gap:10px; padding-bottom:clamp(20px,4vh,30px); }

  /* ---- ficha-cita (acordeón) ---- */
  .cn-chip{ display:block; width:100%; text-align:left; background:rgba(255,255,255,.025);
    border:1px solid rgba(205,180,137,.18); border-left:2px solid rgba(205,180,137,.28);
    border-radius:8px; padding:0; overflow:hidden;
    color:inherit; font-family:inherit; cursor:pointer; transition:border-color .25s, background .25s; }
  .cn-chip.open{ border-color:rgba(205,180,137,.5); border-left-color:var(--sand);
    background:rgba(205,180,137,.06); }
  .cn-chip__head{ display:flex; align-items:center; gap:13px; padding:15px 16px; min-height:54px; }
  .cn-chip__dot{ width:9px; height:9px; border-radius:50%; flex:none;
    background:radial-gradient(circle at 38% 34%, #f4e6c6, var(--sand-deep) 60%, #8f7647);
    box-shadow:0 0 10px 1px rgba(205,180,137,.4); }
  .cn-chip__t{ font-family:var(--sans); font-weight:600; font-size:1.02rem; color:#fff; flex:1;
    letter-spacing:-.005em; line-height:1.25; }
  .cn-chip__pl{ color:var(--sand); font-size:1.2rem; line-height:1; flex:none;
    transition:transform .3s var(--ease); }
  .cn-chip.open .cn-chip__pl{ transform:rotate(45deg); }
  .cn-chip__body{ display:none; }
  .cn-chip.open .cn-chip__body{ display:block; }
  .cn-chip__bodyin{ min-height:0; }
  .cn-chip__inner{ padding:0 18px 17px 38px; }
  .cn-chip__q{ font-family:var(--serif); font-style:italic; color:#e6ddcb; font-size:1.04rem;
    line-height:1.5; margin:0; text-wrap:pretty; }
  .cn-chip__by{ font-family:var(--sans); font-size:.78rem; font-weight:600; color:var(--sand-deep);
    margin-top:10px; letter-spacing:.02em; }
  .cn-chip__by::before{ content:""; }
}
@media (max-width:820px) and (hover:hover){
  .cn-nav__pill:hover{ color:#fff; border-color:rgba(205,180,137,.45); }
  .cn-chip:hover{ border-color:rgba(205,180,137,.4); }
}

/* ============================================================
   NIVEL 2 · leyenda de capas · recorrido · destellos · síntesis
   ============================================================ */

/* leyenda interactiva (escritorio ancho) */
.cn-legend{ position:absolute; right:var(--pad); top:50%; transform:translateY(-50%); z-index:5;
  display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.cn-legend__item{ all:unset; box-sizing:border-box; display:inline-flex; align-items:center; gap:10px;
  cursor:pointer; font-family:var(--sans); padding:7px 13px; border-radius:100px;
  border:1px solid transparent; transition:.25s var(--ease); }
.cn-legend__item .ix{ font-size:.66rem; font-weight:600; letter-spacing:.08em; color:var(--sand-deep); }
.cn-legend__item .nm{ font-size:.84rem; font-weight:500; color:var(--mist); transition:color .25s; }
.cn-legend__item .ct{ font-size:.66rem; font-weight:600; color:var(--mist-soft);
  border:1px solid rgba(205,180,137,.25); border-radius:100px; padding:2px 7px; }
.cn-legend__item:hover .nm{ color:#fff; }
.cn-legend__item.on{ border-color:rgba(205,180,137,.45); background:rgba(205,180,137,.08); }
.cn-legend__item.on .nm{ color:#fff; }
.cn-legend__item:focus-visible{ outline:2px solid var(--sand); outline-offset:2px; }
@media (max-width:1200px){ .cn-legend{ display:none; } }

/* foco por capa */
.cn-stage.layer-focus .cnode:not(.is-lit) .cnode__dot{ opacity:.14; }
.cn-stage.layer-focus .cnode:not(.is-lit) .cnode__lbl{ opacity:.05; }
.cn-stage.layer-focus .cn-line{ stroke:rgba(205,180,137,.06); }
.cn-stage.layer-focus .cn-line.lit{ stroke:rgba(205,180,137,.78); stroke-width:1.3; }

/* recorrido guiado */
.cn-tour{ position:absolute; right:var(--pad); bottom:clamp(20px,4vh,40px); z-index:5;
  display:inline-flex; align-items:center; gap:.7em; cursor:pointer;
  font-family:var(--sans); font-size:.84rem; font-weight:600; letter-spacing:.02em; color:var(--mist);
  background:rgba(10,31,34,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(205,180,137,.28); border-radius:100px; padding:10px 19px;
  transition:.28s var(--ease); }
.cn-tour:hover{ color:#fff; border-color:var(--sand); }
.cn-tour.on{ background:var(--sand); color:var(--forest); border-color:var(--sand); }
.cn-tour .tri{ width:0; height:0; border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent currentColor; transition:.2s; }
.cn-tour.on .tri{ border:0; width:9px; height:10px;
  background:linear-gradient(90deg, currentColor 0 32%, transparent 32% 68%, currentColor 68% 100%); }
.cn-tour:focus-visible{ outline:2px solid var(--sand); outline-offset:3px; }
@media (max-width:820px){ .cn-tour{ display:none; } }

/* destellos viajeros */
.cn-glint{ fill:none; stroke:rgba(244,230,198,.85); stroke-width:1.5; stroke-linecap:round;
  vector-effect:non-scaling-stroke; pointer-events:none; }

/* síntesis bajo el título */
.cn-lead__stats{ margin-top:14px; font-family:var(--sans); font-size:.78rem;
  letter-spacing:.05em; color:var(--mist-soft); }
.cn-lead__stats b{ color:var(--sand); font-weight:600; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cn-svg{ animation:none; }
  .cnode--ring{ animation:none; }
  .cnode--core .cnode__dot::after{ animation:none; }
  .cnode__dot{ opacity:1 !important; transform:none !important; }
  .cnode--core .cnode__lbl, .cnode--L0 .cnode__lbl{ opacity:.85; }
  .cn-line{ stroke-dashoffset:0 !important; }
  .cn-warp{ display:none; }
  .cn-stage{ transition:none; }
  .cn-glint{ display:none; }
}
