/* ===========================================================================
 * RŌNIN · UI v2 — capa visual COMPARTIDA (iteración visual 2, reversible)
 * ---------------------------------------------------------------------------
 * La carga index.html, servicios.html y area-privada.php, después de
 * css/styles.css (y de css/servicios.css en Servicios; ANTES de
 * css/area-privada.css en el Área Privada, para que sus reglas propias ganen).
 *
 * Contiene:
 *   · gramática de movimiento + alturas centralizadas (--site-header-h, …)
 *   · cabecera global RŌNIN (sticky, compacta) + barra de progreso de página
 *   · navegación: anclas internas vs. Servicios (otra página) + estado activo
 *   · RŌNIN PROCESS ENGINE (evolución de la System Console del hero)
 *   · FAQ con apertura/cierre suave (altura animada por WAAPI en el JS)
 *   · BORDE RŌNIN reactivo: el hotspot rojo sigue al cursor en toda card
 *     .ronin-border-* — el motor único vive en ronin-v2-ui.js (bloque 5)
 *
 * NO toca el fondo cinético. NO toca backend/persistencia.
 * Reversión "ITERACIÓN 2": borrar este archivo + su <link>/<script> + la clase
 * .ronin-v2 del <body> de las 3 páginas, y restaurar del backup
 * .ronin-rollback/visual-iteration-2/.
 *
 * Paleta:  rojo #CF000C · papel #E8E6E1 · grafito #1C1C1C · gris #8A8A8A
 * =========================================================================== */

:root{
  --rn-red:#CF000C;
  --rn-paper:#E8E6E1;
  --rn-gray:#8A8A8A;
  --rn-graphite:#1C1C1C;
  --rn-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  /* gramática de movimiento (única para toda la web v2) */
  --motion-fast:160ms;
  --motion-base:290ms;
  --motion-slow:560ms;
  --ease-ronin:cubic-bezier(.22,1,.36,1);

  /* alturas centralizadas */
  --site-header-h:66px;
  --page-progress-h:2px;
  --site-anchor-offset:calc(var(--site-header-h) + 22px);
}

/* ---------------------------------------------------------------------------
 * FIX técnico (documentado): styles.css pone overflow-x:hidden en <html> y
 * <body> → <body> se vuelve contenedor de scroll y position:sticky del <nav>
 * no se ancla al viewport (bug preexistente en Home y Servicios). `clip` corta
 * igual el eje X sin crear contenedor de scroll ni bloque contenedor para
 * position:fixed (el fondo cinético sigue intacto). Área Privada ya lo hace en
 * su propia hoja. Se limita a las páginas con .ronin-v2.
 * ------------------------------------------------------------------------- */
html:has(body.ronin-v2){ overflow-x:clip; }
body.ronin-v2{ overflow-x:clip; }

/* offset de anclas: header sticky compacto + barra de progreso */
body.ronin-v2 :where(section,header,main)[id]{ scroll-margin-top:var(--site-anchor-offset); }

/* ===========================================================================
 * 1 · CABECERA GLOBAL — misma identidad en Home / Servicios / Área Privada
 * ======================================================================== */
body.ronin-v2 nav{
  min-height:var(--site-header-h);
}
body.ronin-v2 .nav-inner{ height:var(--site-header-h); gap:16px; }

/* Home + Servicios: arranca translúcida y se solidifica con el scroll (main.js) */
body.ronin-v2 nav.site-nav{
  background:rgba(10,10,10,.55);
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background var(--motion-base) var(--ease-ronin),
             border-color var(--motion-base) var(--ease-ronin);
}
body.ronin-v2 nav.site-nav.is-scrolled{
  background:rgba(9,9,9,.86);
  border-bottom-color:rgba(255,255,255,.08);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
}

/* brand lockup — logo real, con aire. Sin descriptor corporativo. */
body.ronin-v2 .brand{ gap:13px; align-items:center; }
body.ronin-v2 nav .brand .logo-horizontal{ width:150px; }
body.ronin-v2 .brand-desc{ display:none !important; }  /* descriptor retirado en v2 */

/* barra de progreso de página — fina, roja, pegada bajo el header (Home/Servicios) */
body.ronin-v2 .page-progress{
  position:absolute; left:0; right:0; top:100%;
  height:var(--page-progress-h); background:rgba(255,255,255,.04);
  overflow:hidden; pointer-events:none;
}
body.ronin-v2 .page-progress > span{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:left center;
  background:var(--rn-red);
  box-shadow:0 0 6px rgba(207,0,12,.55);
  will-change:transform;
}
@media (prefers-reduced-motion:no-preference){
  body.ronin-v2 .page-progress > span{ transition:transform 90ms linear; }
}

/* ===========================================================================
 * 2 · NAVEGACIÓN — anclas internas (misma página) vs. Servicios (otra página)
 *     Sin label "EN ESTA PÁGINA": la diferencia es puramente visual.
 * ======================================================================== */
body.ronin-v2 .nav-links{ gap:14px; }
body.ronin-v2 .nav-scope{ display:flex; align-items:center; gap:18px; }
body.ronin-v2 .nav-scope a{
  position:relative; font-size:.88rem; color:#b3b3b3; white-space:nowrap;
  padding:3px 0; transition:color var(--motion-fast) var(--ease-ronin);
}
body.ronin-v2 .nav-scope a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--rn-red); border-radius:2px;
  transition:right var(--motion-base) var(--ease-ronin);
}
body.ronin-v2 .nav-scope a:hover{ color:#fff; }
body.ronin-v2 .nav-scope a.is-current{ color:var(--rn-paper); }
body.ronin-v2 .nav-scope a.is-current::after{ right:0; }

/* Servicios: destacado, con ↗, separado por un filete → "voy a otra página" */
body.ronin-v2 .nav-external{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:.88rem; font-weight:700; color:#d8d8d8;
  padding:3px 0 3px 18px; margin-left:2px;
  border-left:1px solid rgba(255,255,255,.13);
  transition:color var(--motion-fast) var(--ease-ronin);
}
body.ronin-v2 .nav-external .ext-arrow{
  color:var(--rn-red); transition:transform var(--motion-base) var(--ease-ronin);
}
body.ronin-v2 .nav-external:hover{ color:#fff; }
body.ronin-v2 .nav-external:hover .ext-arrow{ transform:translate(2px,-2px); }

/* Servicios = página ACTUAL (en servicios.html) */
body.ronin-v2 .nav-external[aria-current="page"]{
  color:var(--rn-paper); font-weight:800; cursor:default;
}
body.ronin-v2 .nav-external[aria-current="page"] .ext-arrow{ display:none; }
body.ronin-v2 .nav-external[aria-current="page"]::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--rn-red);
  margin-right:2px; box-shadow:0 0 8px rgba(207,0,12,.8);
}

/* CTA algo más compacto para que quepa el grupo sin saltos */
body.ronin-v2 .nav-right{ gap:12px; }
body.ronin-v2 nav .nav-cta{ padding:10px 15px; font-size:.85rem; }

/* menú móvil: Servicios separado del bloque, sin label */
body.ronin-v2 .mobile-links a.mobile-external{
  margin-top:6px; border-top:1px solid rgba(255,255,255,.12);
  color:#e7e7e7; font-weight:800;
}
body.ronin-v2 .mobile-links a.mobile-external .ext-arrow{ color:var(--rn-red); }
body.ronin-v2 .mobile-links a.mobile-external[aria-current="page"]{ color:var(--rn-paper); }

/* ===========================================================================
 * 3 · RŌNIN PROCESS ENGINE — un panel, varios "modos" (hero de la Home)
 * ======================================================================== */
body.ronin-v2 .hero-console{
  position:relative;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(22,22,24,.82),rgba(14,14,16,.82));
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  padding:16px 16px 14px;
  font-family:var(--rn-mono);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
}

body.ronin-v2 .rc-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:11px; margin-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.ronin-v2 .rc-tag{
  font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rn-paper);
}
body.ronin-v2 .rc-tag .rc-mode-name{ color:var(--rn-red); }
body.ronin-v2 .rc-status{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rn-gray);
}
body.ronin-v2 .rc-dot{
  width:6px; height:6px; border-radius:50%; background:var(--rn-red);
  box-shadow:0 0 8px rgba(207,0,12,.8);
}
@media (prefers-reduced-motion:no-preference){
  body.ronin-v2 .rc-dot{ animation:rc-pulse 2.6s var(--ease-ronin) infinite; }
}
@keyframes rc-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* selector manual de proceso — labels pequeños, no tabs enormes */
body.ronin-v2 .rc-tabs{
  display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap;
}
body.ronin-v2 .rc-tab{
  flex:1 1 auto; min-width:0;
  background:transparent; border:1px solid rgba(255,255,255,.09);
  color:#7c7c7c; cursor:pointer;
  font-family:var(--rn-mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 6px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; gap:5px;
  transition:color var(--motion-fast) var(--ease-ronin),
             border-color var(--motion-fast) var(--ease-ronin),
             background var(--motion-fast) var(--ease-ronin);
}
body.ronin-v2 .rc-tab .rc-tab-n{ color:#5a5a5a; font-weight:700; flex:0 0 auto; }
body.ronin-v2 .rc-tab .rc-tab-label{ overflow:hidden; text-overflow:ellipsis; }
body.ronin-v2 .rc-tab:hover{ color:#cfcfcf; border-color:rgba(255,255,255,.16); }
body.ronin-v2 .rc-tab:focus-visible{ outline:2px solid var(--rn-red); outline-offset:2px; }
body.ronin-v2 .rc-tab.is-current{
  color:var(--rn-paper); border-color:rgba(207,0,12,.4); background:rgba(207,0,12,.08);
}
body.ronin-v2 .rc-tab.is-current .rc-tab-n{ color:var(--rn-red); }
@media (max-width:520px){
  body.ronin-v2 .rc-tab .rc-tab-label{ display:none; }
  body.ronin-v2 .rc-tab{ flex:0 0 auto; min-width:36px; }
}

/* lista de pasos del modo actual */
body.ronin-v2 .rc-steps{
  list-style:none; display:flex; flex-direction:column; gap:2px;
  transition:opacity var(--motion-slow) var(--ease-ronin),
             transform var(--motion-slow) var(--ease-ronin),
             filter var(--motion-slow) var(--ease-ronin);
}
body.ronin-v2 .rc-steps.is-leaving{ opacity:0; transform:translateY(-10px); filter:blur(3px); }
body.ronin-v2 .rc-steps.is-entering{ opacity:0; transform:translateY(12px); filter:blur(3px); }
body.ronin-v2 .rc-step{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:9px 8px; border-radius:8px; color:#8f8f8f;
  transition:background var(--motion-base) var(--ease-ronin),
             color var(--motion-base) var(--ease-ronin);
}
body.ronin-v2 .rc-idx{ font-size:.62rem; letter-spacing:.1em; color:#5f5f5f; transition:color var(--motion-base) var(--ease-ronin); }
body.ronin-v2 .rc-label{ font-size:.88rem; font-weight:600; letter-spacing:.01em; }
body.ronin-v2 .rc-state{
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:#5a5a5a;
  min-width:1.4em; text-align:right;
}
body.ronin-v2 .rc-step.is-active{ background:rgba(207,0,12,.08); color:var(--rn-paper); }
body.ronin-v2 .rc-step.is-active .rc-idx{ color:var(--rn-red); }
body.ronin-v2 .rc-step.is-active .rc-state{ color:var(--rn-red); }
body.ronin-v2 .rc-step.is-done{ color:#787878; }
body.ronin-v2 .rc-step.is-done .rc-state{ color:var(--rn-gray); }

body.ronin-v2 .rc-readout{
  display:flex; align-items:center; gap:7px;
  margin-top:11px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.7rem; color:#9a9a9a; min-height:1.4em;
}
body.ronin-v2 .rc-prompt{ color:var(--rn-red); font-weight:700; }
body.ronin-v2 .rc-line{ letter-spacing:.02em; }
body.ronin-v2 .rc-caret{
  width:7px; height:12px; background:var(--rn-paper); display:inline-block;
  transform:translateY(1px);
}
@media (prefers-reduced-motion:no-preference){
  body.ronin-v2 .rc-caret{ animation:rc-blink 1.05s steps(1) infinite; }
}
@keyframes rc-blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* barrido rojo MUY controlado durante el cambio de modo */
body.ronin-v2 .rc-sweep{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(100deg,transparent 40%,rgba(207,0,12,.14) 50%,transparent 60%);
  background-size:280% 100%; background-position:120% 0;
}
body.ronin-v2 .rc-sweep.is-run{
  animation:rc-sweep var(--motion-slow) var(--ease-ronin);
}
@keyframes rc-sweep{
  0%{ opacity:0; background-position:120% 0 }
  30%{ opacity:1 }
  100%{ opacity:0; background-position:-60% 0 }
}

/* scan ambiental (heredado, se conserva) */
body.ronin-v2 .rc-scan{
  position:absolute; left:0; right:0; top:0; height:64px; pointer-events:none;
  background:linear-gradient(180deg,rgba(232,230,225,.05),transparent);
  opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  body.ronin-v2 .rc-scan{ animation:rc-scan 8.5s linear infinite; }
}
@keyframes rc-scan{
  0%{ transform:translateY(-70px); opacity:0 }
  12%{ opacity:.6 } 50%{ opacity:.6 } 70%{ opacity:0 }
  100%{ transform:translateY(360px); opacity:0 }
}

/* ===========================================================================
 * 4 · FAQ — apertura/cierre suave (altura animada por WAAPI en ronin-v2-ui.js)
 *     Se mantiene <details>/<summary> nativo (semántica, teclado, [open]).
 *     El JS retrasa el cierre real hasta terminar la animación de la altura.
 * ======================================================================== */
body.ronin-v2 .faq-list .faq-panel{ overflow:hidden; }
body.ronin-v2 .faq-list details[open] .faq-panel p{ animation:none; }  /* neutraliza faq-in de styles.css */
body.ronin-v2 .faq-list summary::after{
  transition:transform var(--motion-base) var(--ease-ronin);
}

/* ===========================================================================
 * 5 · BORDE ANIMADO RŌNIN — señal roja que SIGUE AL CURSOR (motor único)
 * ---------------------------------------------------------------------------
 * Anillo de 1px por doble máscara (content-box XOR box) sobre ::after — técnica
 * tomada de .signup-form-box::before del tema de Drakkar. Un solo motor en
 * ronin-v2-ui.js (bloque 5) mueve el hotspot y su intensidad mediante 4
 * custom properties:
 *
 *   --rb-x / --rb-y  posición del hotspot dentro de la card (0%–100%)
 *   --rb-i           intensidad 0–1 (alpha global del hotspot + glow)
 *   --rb-r           radio del hotspot (px) — mayor en paneles anchos (§3 iter 3)
 *
 * Comportamiento:
 *   .ronin-border-ambient  → paneles: órbita lenta en reposo; al entrar el
 *                            cursor la órbita se anula y el hotspot lo sigue.
 *   .ronin-border-hover    → grids de cards: en reposo nada; al entrar el
 *   .ronin-reactive-border   cursor aparece el hotspot y lo sigue (alias claro,
 *                            mismo comportamiento que -hover).
 * Todos usan EL MISMO motor. El borde base (1px) del componente se conserva:
 * esto SUMA encima. Sin JS, los paneles ambient orbitan por CSS (fallback).
 * Colores EXCLUSIVAMENTE RŌNIN: rojo #CF000C + núcleo papel #E8E6E1 mínimo.
 * ======================================================================== */
@property --rb-x{ syntax:"<percentage>"; inherits:false; initial-value:50%; }
@property --rb-y{ syntax:"<percentage>"; inherits:false; initial-value:6%; }
@property --rb-i{ syntax:"<number>";     inherits:false; initial-value:0; }
@property --rb-r{ syntax:"<length>";     inherits:false; initial-value:150px; }

body.ronin-v2 .ronin-border-ambient,
body.ronin-v2 .ronin-border-hover,
body.ronin-v2 .ronin-reactive-border{
  position:relative;
  --rb-x:50%; --rb-y:6%; --rb-i:0; --rb-r:150px;
}

body.ronin-v2 .ronin-border-ambient::after,
body.ronin-v2 .ronin-border-hover::after,
body.ronin-v2 .ronin-reactive-border::after{
  content:""; position:absolute; inset:0; z-index:1;
  border-radius:inherit; padding:1px;
  /* hotspot localizado: núcleo papel diminuto → rojo pleno → cae a transparente.
     El radio (--rb-r) lo fija el JS por tamaño real: siempre LOCAL, nunca todo
     el perímetro. */
  background:radial-gradient(circle var(--rb-r,150px) at var(--rb-x) var(--rb-y),
      rgba(232,230,225, calc(.60 * var(--rb-i)))   0%,
      rgba(207,0,12,    calc(1    * var(--rb-i)))   5%,
      rgba(207,0,12,    calc(.92  * var(--rb-i)))  24%,
      rgba(207,0,12,    calc(.55  * var(--rb-i)))  46%,
      rgba(207,0,12,    calc(.18  * var(--rb-i)))  70%,
      rgba(207,0,12,0)                            100%);
  background-repeat:no-repeat;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  /* doble glow LOCALIZADO — drop-shadow sigue la forma del tramo iluminado
     del anillo, no el rectángulo entero → nada de glow global. */
  filter:drop-shadow(0 0 7px  rgba(207,0,12, calc(.68 * var(--rb-i))))
         drop-shadow(0 0 16px rgba(207,0,12, calc(.27 * var(--rb-i))));
  pointer-events:none;
}

/* fallback SIN JS: los paneles ambient orbitan (requiere @property, arriba).
   Con JS activo, ronin-v2-ui.js añade .rb-live al <body> y toma el control. */
@keyframes ronin-border-orbit{
  0%  { --rb-x:8%;  --rb-y:14%; }
  25% { --rb-x:92%; --rb-y:8%;  }
  50% { --rb-x:90%; --rb-y:88%; }
  75% { --rb-x:10%; --rb-y:92%; }
  100%{ --rb-x:8%;  --rb-y:14%; }
}
body.ronin-v2:not(.rb-live) .ronin-border-ambient{
  --rb-i:.42;
  animation:ronin-border-orbit 9s linear infinite;
}
@media (hover:hover){
  body.ronin-v2:not(.rb-live) .ronin-border-hover:hover,
  body.ronin-v2:not(.rb-live) .ronin-reactive-border:hover{ --rb-i:.9; }
}
body.ronin-v2:not(.rb-live) .ronin-border-hover:focus-within,
body.ronin-v2:not(.rb-live) .ronin-reactive-border:focus-within{ --rb-i:.9; }

@media (prefers-reduced-motion:reduce){
  body.ronin-v2:not(.rb-live) .ronin-border-ambient{ animation:none; --rb-i:.4; --rb-x:8%; --rb-y:12%; }
}

/* ===========================================================================
 * 6 · RESPONSIVE (cabecera / engine)
 * ======================================================================== */
@media (max-width:920px){
  :root{ --site-header-h:60px; }
}
@media (max-width:620px){
  :root{ --site-header-h:56px; }
  body.ronin-v2 .hero-console{ padding:14px 13px 13px; }
  body.ronin-v2 .rc-label{ font-size:.82rem; }
}