/* ============================================================
   THE JESUS WAY — página «Quién soy» (quien-soy.html)
   A propósito ROMPE con Lacuna Aurea: el resto del sitio es cálido,
   serif, oro sobre tinta. Esta página es la única voz en primera
   persona del sitio, y se siente aparte a propósito — una terminal,
   no un manuscrito. Todo queda aislado bajo body.pagina-autor (clase
   que pone/quita camino.js en cada navegación — ver iniciarPagina),
   así que nunca se queda "pegado" en el resto del sitio al salir.
   ============================================================ */

body.pagina-autor{
  --fondo:#03050a;
  --fondo-rgb:3,5,10;
  --fondo-hondo:#010203;
  --banda:#070d18;
  --display:#eafdff;
  --texto:#a7cfdb;
  --secundario:#4f7f92;
  --oro:#00e5ff;
  --oro-rgb:0,229,255;
  --azul:#ff2bd6;
  --terracota:#ff3860;
  --hairline-neutra:rgba(0,229,255,.2);
  --pildora-borde:rgba(0,229,255,.4);
  --barra-fondo:rgba(3,5,10,.78);
  --cta-texto:#03050a;
  --serif:'Orbitron','Michroma',sans-serif;
  --sans:'Share Tech Mono','Courier New',monospace;
  --a-15:.15; --a-18:.18; --a-2:.2; --a-3:.3; --a-35:.35; --a-45:.45;
  background-color:var(--fondo);
  background-image:
    linear-gradient(rgba(0,229,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.07) 1px, transparent 1px);
  background-size:38px 38px;
  background-attachment:fixed;
}
/* una terminal no cambia de tema */
body.pagina-autor #boton-tema,
body.pagina-autor #tema-movil{display:none}

body.pagina-autor .marca span:last-child,
body.pagina-autor .enlaces a,
body.pagina-autor .menu-filas a .titulo{
  font-family:var(--sans);letter-spacing:.08em;
}
/* menú como botones de panel de control (ref. "Centro de cálculo") */
body.pagina-autor .enlaces{gap:8px}
body.pagina-autor .enlaces a{
  color:#cfe6f2;font-size:11px;padding:7px 13px;border-radius:9px;
  border:1px solid rgba(var(--oro-rgb),.22);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:border-color .2s,box-shadow .2s,color .2s;
}
body.pagina-autor .enlaces a:hover,
body.pagina-autor .enlaces a.activa{
  color:#fff;border-color:rgba(var(--oro-rgb),.7);
  box-shadow:0 0 14px rgba(var(--oro-rgb),.35),inset 0 0 10px rgba(var(--oro-rgb),.12);
}

body.pagina-autor h1{text-shadow:0 0 18px rgba(var(--oro-rgb),.5),0 0 2px rgba(var(--oro-rgb),.9)}
body.pagina-autor .cabeza-seccion{margin-bottom:18px}
body.pagina-autor .cabeza-seccion .num{
  font-family:var(--sans);color:var(--oro);text-shadow:0 0 10px rgba(var(--oro-rgb),.6);
}
/* el motivo de fondo por defecto es el mismo círculo en todo el sitio —
   aquí se apaga y se reemplaza por estrellas de David que suben */
body.pagina-autor #capa-motivo{display:none}

/* ------------------------------------------- fondo: estrellas de David */
.autor-estrellas{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.autor-estrellas .ed{
  position:absolute;left:var(--x);top:100dvh;width:var(--t);height:var(--t);
  fill:none;stroke:var(--oro);stroke-width:3;opacity:var(--o);
  filter:drop-shadow(0 0 6px rgba(var(--oro-rgb),.7));
  animation:ed-subir var(--d) linear var(--dl) infinite;
}
@keyframes ed-subir{
  from{transform:translateY(0) rotate(0deg)}
  to{transform:translateY(calc(-100dvh - 120px)) rotate(var(--g))}
}
@media(prefers-reduced-motion:reduce){
  .autor-estrellas .ed{animation:none;top:calc(var(--o) * 140vh)}
}

/* --------------------------------------- layout ancho (estilo Garden Eight)
   el resto del sitio usa una columna de lectura de 980px; aquí se usa
   casi todo el ancho y la tipografía grande ocupa el espacio */
body.pagina-autor .envoltura{max-width:1500px;padding-left:5vw;padding-right:5vw}
body.pagina-autor .pagina-seccion{max-width:none;padding-top:120px}
body.pagina-autor .pagina-seccion .cabeza-seccion h1{
  font-size:clamp(46px,8vw,132px);line-height:1.1;letter-spacing:-.01em;font-weight:700;
}

.autor-intro{
  display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,64px);
  align-items:start;margin-top:12px;
}
.autor-intro .autor-lede{margin-top:0;max-width:none;font-size:clamp(17px,1.6vw,24px);line-height:1.55}

.autor-cuerpo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.autor-cuerpo > *{max-width:none !important}
.autor-cuerpo .autor-bloque p{max-width:72ch}
.autor-cuerpo .autor-enfasis,.autor-cuerpo .autor-aviso{padding-right:max(20px,calc(100% - 84ch))}
.autor-cuerpo .autor-enfasis,.autor-cuerpo .autor-aviso,.autor-cuerpo .autor-firma{grid-column:1 / -1}
@media(max-width:860px){
  .autor-intro{grid-template-columns:1fr}
  .autor-intro .autor-retrato{max-width:180px}
  .autor-cuerpo{grid-template-columns:1fr}
}

/* ------------------------------------------------------------ retrato */
.autor-retrato{
  position:relative;max-width:200px;margin:0;
}
.autor-retrato img{
  display:block;width:100%;height:auto;border:1px solid var(--hairline-neutra);
  filter:contrast(1.05) brightness(.88);
}
.autor-retrato::before,.autor-retrato::after{
  content:'';position:absolute;width:10px;height:10px;border-color:var(--oro);opacity:.85;
}
.autor-retrato::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.autor-retrato::after{bottom:23px;right:-1px;border-bottom:2px solid;border-right:2px solid}
.autor-retrato figcaption{
  margin-top:9px;font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--secundario);
}
.autor-retrato figcaption::before{content:'// '}

/* -------------------------------------------------------------- lede */
.autor-lede{
  max-width:880px;margin-top:16px;font-family:var(--sans);font-size:15.5px;
  line-height:1.65;color:var(--texto);
}
.autor-lede::after{
  content:'▌';color:var(--oro);margin-left:4px;animation:autor-parpadeo 1.1s steps(1) infinite;
}
@keyframes autor-parpadeo{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.autor-lede::after{animation:none}}

/* ----------------------------------------------------------- paneles */
/* tarjetas "iluminadas": borde con luz, brillo interior, esquinas redondas */
.autor-bloque{
  position:relative;max-width:880px;margin-top:22px;padding:20px 24px;
  border-radius:16px;border:1px solid rgba(var(--oro-rgb),.28);
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(var(--oro-rgb),.10),transparent 60%),
    linear-gradient(180deg,rgba(14,22,38,.92),rgba(5,8,16,.92));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 1px 0 rgba(255,255,255,.08) inset,
    0 0 28px rgba(var(--oro-rgb),.12),
    0 18px 40px rgba(0,0,0,.45);
  transition:box-shadow .3s,border-color .3s;
}
.autor-bloque:hover{
  border-color:rgba(var(--oro-rgb),.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 0 40px rgba(var(--oro-rgb),.25),0 18px 40px rgba(0,0,0,.45);
}
.autor-bloque::before,.autor-bloque::after,
.autor-aviso::before,.autor-aviso::after{
  content:'';position:absolute;width:12px;height:12px;
  border-color:var(--oro);opacity:.75;
}
.autor-bloque::before{top:8px;left:8px;border-top:2px solid;border-left:2px solid;border-top-left-radius:4px}
.autor-bloque::after{top:8px;right:8px;border-top:2px solid;border-right:2px solid;border-top-right-radius:4px}
.autor-bloque .rotulo{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;color:var(--oro);
  text-shadow:0 0 8px rgba(var(--oro-rgb),.6);
}
.autor-bloque .rotulo::before{content:'// '}
.autor-bloque h2{
  font-family:var(--serif);font-weight:700;font-size:clamp(16px,2.1vw,20px);
  letter-spacing:.02em;line-height:1.35;color:var(--display);margin:8px 0 10px;
  text-shadow:0 0 12px rgba(var(--oro-rgb),.35);
}
.autor-bloque p{margin:0 0 9px;font-family:var(--sans);font-size:13.5px;line-height:1.65;color:var(--texto)}
.autor-bloque p:last-child{margin-bottom:0}

/* ----------------------------------------------------------- énfasis */
.autor-enfasis{
  max-width:880px;margin:24px 0 0;padding:14px 20px;
  background:rgba(255,43,214,.06);border-left:3px solid var(--azul);
  font-family:var(--sans);font-size:clamp(14px,1.8vw,16px);line-height:1.6;
  color:var(--display);text-shadow:0 0 10px rgba(255,43,214,.3);
}

/* -------------------------------------------------------------- aviso */
.autor-aviso{
  position:relative;max-width:880px;margin-top:24px;
  background:rgba(var(--fondo-rgb),.5);border:1px solid rgba(255,56,96,.4);
  padding:16px 20px;font-family:var(--sans);font-size:13px;line-height:1.65;color:var(--texto);
}
.autor-aviso::before{top:-1px;left:-1px;border-top:2px solid var(--terracota);border-left:2px solid var(--terracota)}
.autor-aviso::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--terracota);border-right:2px solid var(--terracota)}
.autor-aviso b{color:var(--terracota);text-shadow:0 0 8px rgba(255,56,96,.5)}
.autor-aviso a{color:var(--oro)}

/* -------------------------------------------------------------- firma */
.autor-firma{
  max-width:880px;margin-top:28px;padding-top:14px;
  border-top:1px dashed var(--hairline-neutra);
  font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--secundario);
}
.autor-firma::before{content:'root@thejesusway:~$ '}

/* mismo brillo para el énfasis y el contacto */
.autor-enfasis{border-radius:14px;border:1px solid rgba(255,43,214,.35);border-left-width:3px;
  box-shadow:0 0 30px rgba(255,43,214,.15),inset 0 1px 0 rgba(255,255,255,.06)}
.autor-aviso{border-radius:14px;box-shadow:0 0 30px rgba(255,56,96,.14),inset 0 1px 0 rgba(255,255,255,.06)}
.autor-aviso::before{top:8px;left:8px;border-top-left-radius:4px}
.autor-aviso::after{top:8px;right:8px;bottom:auto;border-bottom:0;border-top:2px solid var(--terracota);border-top-right-radius:4px}

/* bloque a todo lo ancho + verso destacado */
.autor-cuerpo .autor-bloque-ancho{grid-column:1 / -1}
.autor-verso{
  margin:16px 0 0 !important;padding:14px 0 0;border-top:1px solid rgba(var(--oro-rgb),.2);
  font-family:var(--serif) !important;font-weight:700;font-size:clamp(22px,2.6vw,34px) !important;
  line-height:1.2 !important;color:var(--display) !important;
  text-shadow:0 0 18px rgba(var(--oro-rgb),.55);
}
.autor-verso span{
  display:block;margin-top:8px;font-family:var(--sans);font-weight:400;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--secundario);text-shadow:none;
}
.autor-verso a{color:var(--oro)}

/* el menú se enciende botón por botón, en ola */
body.pagina-autor .enlaces a{animation:nav-ola 7s ease-in-out infinite}
body.pagina-autor .enlaces a:nth-child(1){animation-delay:0s}
body.pagina-autor .enlaces a:nth-child(2){animation-delay:.5s}
body.pagina-autor .enlaces a:nth-child(3){animation-delay:1s}
body.pagina-autor .enlaces a:nth-child(4){animation-delay:1.5s}
body.pagina-autor .enlaces a:nth-child(5){animation-delay:2s}
body.pagina-autor .enlaces a:nth-child(6){animation-delay:2.5s}
body.pagina-autor .enlaces a:nth-child(7){animation-delay:3s}
@keyframes nav-ola{
  0%,14%,100%{border-color:rgba(var(--oro-rgb),.22);color:#cfe6f2;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  6%{border-color:rgba(var(--oro-rgb),.9);color:#fff;
     box-shadow:0 0 18px rgba(var(--oro-rgb),.55),inset 0 0 12px rgba(var(--oro-rgb),.2);
     text-shadow:0 0 8px rgba(var(--oro-rgb),.8)}
}
@media(prefers-reduced-motion:reduce){body.pagina-autor .enlaces a{animation:none}}
body.pagina-autor .enlaces a:hover{animation:none}

/* contador "30 ateo · 4 creyendo" */
.autor-cuenta{
  margin-top:14px !important;padding-top:12px;border-top:1px dashed rgba(var(--oro-rgb),.25);
  font-size:12px !important;letter-spacing:.1em;text-transform:uppercase;color:var(--secundario) !important;
}
.autor-cuenta b{
  font-family:var(--serif);font-size:22px;color:var(--oro);letter-spacing:0;
  text-shadow:0 0 12px rgba(var(--oro-rgb),.6);margin-right:2px;
}

/* dicho favorito: brilla y flota despacio */
.autor-favorito{
  margin:28px 0 0;padding:18px 24px 16px;border-radius:14px;
  border:1px solid rgba(var(--oro-rgb),.3);
  background:radial-gradient(90% 120% at 50% 0%,rgba(var(--oro-rgb),.12),transparent 70%),rgba(5,10,20,.6);
  animation:fav-flotar 7s ease-in-out infinite, fav-brillo 4s ease-in-out infinite;
}
.autor-favorito .rotulo{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;margin:0 0 8px}
.autor-favorito .rotulo::before{content:'// '}
.autor-favorito blockquote{
  margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(18px,2vw,28px);line-height:1.35;
  color:var(--display);animation:fav-texto 4s ease-in-out infinite;
}
.autor-favorito figcaption{
  margin-top:10px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--secundario);
}
.autor-favorito figcaption a{color:var(--oro)}
@keyframes fav-flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fav-brillo{
  0%,100%{box-shadow:0 0 18px rgba(var(--oro-rgb),.12)}
  50%{box-shadow:0 0 42px rgba(var(--oro-rgb),.38)}
}
@keyframes fav-texto{
  0%,100%{text-shadow:0 0 10px rgba(var(--oro-rgb),.35)}
  50%{text-shadow:0 0 24px rgba(var(--oro-rgb),.85)}
}
@media(prefers-reduced-motion:reduce){.autor-favorito,.autor-favorito blockquote{animation:none}}
