:root{
    --navy-0:#060d1c;
    --navy-1:#0c1930;
    --navy-2:#132241;
    --navy-3:#1c2f52;
    --gold-0:#c9a24b;
    --gold-1:#e6c877;
    --gold-2:#8a6a2a;
    --cream:#f6efdd;
    --white:#ffffff;
    --blue-0:#2f5fa8;
    --blue-1:#4f7fc2;
    --crimson-0:#a3182f;
    --crimson-1:#c23350;
    --text-light:#e9e2cf;
    --text-dim:#9fb0c9;
    --shadow: 0 18px 45px rgba(0,0,0,.45);
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; min-height:100%; background:var(--navy-0); }
  body{
    font-family:'Lato', -apple-system, "Segoe UI", sans-serif;
    color:var(--text-light);
    background:
      radial-gradient(ellipse at 50% -10%, #1e3660 0%, transparent 55%),
      radial-gradient(ellipse at 50% 110%, #0d1a33 0%, transparent 60%),
      linear-gradient(180deg, var(--navy-1), var(--navy-0) 60%, #050b16);
    min-height:100vh;
    overflow-x:hidden;
  }
  h1,h2,h3{ font-family:'Playfair Display', Georgia, serif; margin:0; }
  .smallcaps{ font-family:'Cinzel', Georgia, serif; letter-spacing:.14em; text-transform:uppercase; }

  /* ---------- foto del Cristo de la Concordia de fondo, muy sutil: va
     detrás de todo (incluido el medallón, que es opaco y no se ve afectado)
     y con un velo oscuro encima para que nunca compita con el contenido. */
  #bgphoto{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-size:cover; background-position:center 32%;
    filter:saturate(.8);
  }

  /* ---------- decorative background flecks (titilando) ---------- */
  #stars{ position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:
      radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,.55), transparent),
      radial-gradient(1.5px 1.5px at 80% 30%, rgba(230,200,119,.5), transparent),
      radial-gradient(1.5px 1.5px at 60% 80%, rgba(255,255,255,.4), transparent),
      radial-gradient(1.5px 1.5px at 30% 70%, rgba(163,24,47,.35), transparent),
      radial-gradient(1.5px 1.5px at 90% 85%, rgba(230,200,119,.45), transparent),
      radial-gradient(1.5px 1.5px at 45% 12%, rgba(255,255,255,.45), transparent),
      radial-gradient(1.5px 1.5px at 20% 55%, rgba(79,127,194,.4), transparent),
      radial-gradient(1.5px 1.5px at 70% 60%, rgba(230,200,119,.35), transparent);
    background-size: 100% 100%;
    animation: twinkle 4.5s ease-in-out infinite alternate;
  }
  @keyframes twinkle{ 0%{ opacity:.55; } 50%{ opacity:1; } 100%{ opacity:.65; } }

  /* ---------- top navigation bar ---------- */
  #topbar{
    position:fixed; top:0; left:0; right:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 22px;
    background:linear-gradient(180deg, rgba(6,13,28,.92), rgba(6,13,28,.65) 80%, transparent);
    backdrop-filter: blur(6px);
    transition: opacity .35s ease, transform .35s ease;
  }
  #topbar.hidden{ opacity:0; transform:translateY(-14px); pointer-events:none; }

  .topbar-left{ display:flex; align-items:center; gap:12px; }
  .topbar-logo{
    height:46px; width:auto; display:block;
    filter: drop-shadow(0 0 7px rgba(255,255,255,.9)) drop-shadow(0 0 18px rgba(255,255,255,.55))
            drop-shadow(0 0 30px rgba(150,210,245,.4)) drop-shadow(0 2px 5px rgba(0,0,0,.5));
  }
  @media (max-width:520px){ .topbar-logo{ height:36px; } }

  .navbtn{
    font-family:'Cinzel', Georgia, serif; font-size:12.5px; letter-spacing:.08em;
    background:rgba(201,162,75,.08); color:var(--gold-1);
    border:1px solid rgba(201,162,75,.45); border-radius:999px;
    padding:9px 18px; cursor:pointer; white-space:nowrap;
    transition:all .2s ease;
  }
  .navbtn:hover{ background:rgba(201,162,75,.22); border-color:var(--gold-1); box-shadow:0 0 14px rgba(230,200,119,.25); }
  .navbtn:disabled{ opacity:.35; cursor:default; box-shadow:none; }

  /* ---------- screens ---------- */
  #hero-screen, #graph-screen{ position:fixed; inset:0; z-index:1; transition:opacity .5s ease; }
  #hero-screen.hidden, #graph-screen.hidden{ opacity:0; pointer-events:none; }
  #hero-screen{ display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto; }
  #graph-screen{ overflow:hidden; }

  /* ---- hero / root splash ---- */
  .hero{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; padding:34px 0 10px; margin:auto; animation:fadeUp .9s ease both; }
  #hero-screen:not(.hidden) ~ #pagefooter{ visibility:hidden; }
  .medallion-wrap{ position:relative; width:min(58vw, 420px); aspect-ratio:1/1; cursor:pointer; }
  .medallion-wrap::after{
    content:""; position:absolute; inset:-16px; border-radius:50%; z-index:0; pointer-events:none;
    background: conic-gradient(from 0deg,
      transparent 0deg, rgba(230,200,119,.65) 22deg, transparent 65deg,
      transparent 150deg, rgba(163,24,47,.5) 185deg, transparent 230deg,
      transparent 270deg, rgba(79,127,194,.45) 300deg, transparent 340deg);
    filter: blur(7px);
    animation: rotateShimmer 7s linear infinite;
  }
  @keyframes rotateShimmer{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  .medallion-ring{
    position:absolute; inset:0; border-radius:50%; z-index:2;
    border:2px solid var(--gold-0);
    box-shadow: 0 0 0 6px rgba(201,162,75,.08), 0 0 40px rgba(201,162,75,.25), var(--shadow);
    transition: box-shadow .4s ease, transform .4s ease;
    animation: ringPulse 3.4s ease-in-out infinite;
  }
  @keyframes ringPulse{
    0%,100%{ box-shadow: 0 0 0 6px rgba(201,162,75,.08), 0 0 40px rgba(201,162,75,.25), var(--shadow); }
    50%{ box-shadow: 0 0 0 11px rgba(201,162,75,.18), 0 0 66px rgba(230,200,119,.55), var(--shadow); }
  }
  .medallion-ring::before{
    content:""; position:absolute; inset:10px; border-radius:50%; border:1px solid rgba(201,162,75,.55);
  }
  .medallion-wrap:hover .medallion-ring{ box-shadow:0 0 0 10px rgba(201,162,75,.14), 0 0 60px rgba(230,200,119,.45), var(--shadow); transform:scale(1.02); }
  .medallion-face{
    position:absolute; inset:14px; border-radius:50%; overflow:hidden; z-index:1;
    background: radial-gradient(circle at 50% 40%, var(--cream), #e8dcbb 75%, #ddcf9f);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5%;
    padding:8% 11% 9%;
  }
  .medallion-logo{
    display:block; max-width:100%; max-height:76%; width:auto; height:auto; object-fit:contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.18));
  }
  .medallion-caption{
    position:static; z-index:3;
    font-family:'Cinzel', Georgia, serif; font-weight:700; letter-spacing:.1em;
    font-size:clamp(9px, 2vw, 14px); color:#2a2008; text-transform:uppercase;
    text-shadow:0 1px 3px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.7);
  }
  .hero-slogan{ font-family:'Playfair Display', Georgia, serif; font-style:italic; color:var(--gold-1);
    font-size:clamp(14px, 2vw, 19px); max-width:560px; line-height:1.5; }
  .hero-hint{
    font-family:'Cinzel', Georgia, serif; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--text-dim); animation:pulse 2.4s ease-in-out infinite;
  }

  @keyframes pulse{ 0%,100%{ opacity:.45;} 50%{ opacity:1;} }
  @keyframes fadeUp{ from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);} }

  /* ---- fórmula / candidatos: avatares en el splash, con perfil emergente ---- */
  .candidates-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; }
  .candidates-title{ font-size:11.5px; color:var(--gold-1); letter-spacing:.22em; }
  .candidates-row{ display:flex; gap:40px; }
  .candidate{ display:flex; flex-direction:column; align-items:center; gap:9px; cursor:pointer; }
  .cand-avatar{
    width:88px; height:88px; border-radius:50%;
    background:radial-gradient(circle at 50% 38%, var(--navy-3), var(--navy-1));
    border:2px solid var(--gold-0); box-shadow:0 8px 20px rgba(0,0,0,.45);
    display:flex; align-items:center; justify-content:center; color:var(--gold-1);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .cand-avatar svg{ width:46px; height:46px; }
  .candidate:hover .cand-avatar{
    transform:scale(1.08);
    box-shadow:0 0 0 6px rgba(230,200,119,.16), 0 12px 28px rgba(0,0,0,.5);
  }
  .cand-name{ font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:13.5px; }
  .cand-role{ font-family:'Cinzel', Georgia, serif; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); }

  .candtip{
    position:fixed; z-index:20; width:280px; max-width:86vw;
    transform:translate(var(--ctx,0%),-50%); pointer-events:none; opacity:0;
    background:linear-gradient(180deg, rgba(18,28,48,.97), rgba(8,14,26,.97));
    border:1px solid rgba(255,255,255,.25); border-left:3px solid var(--gold-0);
    border-radius:4px 14px 14px 4px; padding:16px 18px; box-shadow:0 16px 34px rgba(0,0,0,.55);
    transform-origin:var(--ctox,0%) 50%;
    transition:opacity .18s ease, transform .18s ease;
  }
  .candtip.show{ opacity:1; transform:translate(var(--ctx,0%),-50%) scale(1); }
  .candtip:not(.show){ transform:translate(var(--ctx,0%),-50%) scale(.94); }
  .candtip.mobile-centered{ left:50%; top:50%; transform:translate(-50%,-50%) scale(.94); }
  .candtip.mobile-centered.show{ transform:translate(-50%,-50%) scale(1); }
  .candtip .candtipname{ display:block; font-family:'Playfair Display', Georgia, serif; font-weight:700; color:var(--white); font-size:15px; margin-bottom:4px; }
  .candtip .candtiprole{ display:block; font-family:'Cinzel', Georgia, serif; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-1); margin-bottom:8px; }
  .candtip p{ margin:0; font-size:13px; line-height:1.55; color:var(--text-light); font-weight:300; text-align:left; }

  @media (max-width:640px){
    .candidates-row{ gap:26px; }
    .cand-avatar{ width:76px; height:76px; }
    .cand-avatar svg{ width:40px; height:40px; }
    .candtip{ width:min(86vw, 320px); }
    .candtip .candtipname{ font-size:16px; }
    .candtip .candtiprole{ font-size:10px; }
    .candtip p{ font-size:14.5px; line-height:1.6; }
  }

  /* ---- graph screen: connected nodes that grow into a tree, camera pans smoothly ---- */
  #world{ position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; transition:transform .75s cubic-bezier(.16,1,.3,1); }
  #world.notransition{ transition:none; }
  #edgesSvg{ position:absolute; left:0; top:0; overflow:visible; pointer-events:none; }
  .edge-line{
    stroke:rgba(230,200,119,.55); stroke-width:2; opacity:0; stroke-dasharray:7 6;
    transition:opacity .5s ease;
  }
  .edge-line.show{ opacity:1; animation: dashFlow 1.1s linear infinite; }
  @keyframes dashFlow{ to{ stroke-dashoffset:-26; } }
  #nodesLayer{ position:absolute; left:0; top:0; }

  .gnode{
    position:absolute; transform:translate(-50%,-50%);
    width:120px; height:120px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding:10px; cursor:pointer; user-select:none;
    font-family:'Playfair Display', Georgia, serif; font-weight:700; font-size:13.5px; line-height:1.22;
    border:2px solid rgba(255,255,255,.5);
    box-shadow:0 10px 26px rgba(0,0,0,.45);
    transition: left .75s cubic-bezier(.16,1,.3,1), top .75s cubic-bezier(.16,1,.3,1),
                opacity .35s ease, box-shadow .25s ease, width .3s ease, height .3s ease, font-size .3s ease,
                transform .2s ease, border-color .2s ease;
  }
  .gnode:hover{
    box-shadow:0 0 0 6px rgba(255,255,255,.18), 0 14px 32px rgba(0,0,0,.55);
    border-color:#fff; transform:translate(-50%,-50%) scale(1.08); z-index:6;
  }
  .gnode.ancestor{ opacity:.7; width:86px; height:86px; font-size:11.5px; }
  .gnode.focus{ animation: focusGlow 2.2s ease-in-out infinite; border-color:var(--white); }
  @keyframes focusGlow{
    0%,100%{ box-shadow:0 0 0 5px rgba(230,200,119,.35), 0 16px 34px rgba(0,0,0,.5); }
    50%{ box-shadow:0 0 0 11px rgba(230,200,119,.55), 0 20px 44px rgba(0,0,0,.55); }
  }
  .gnode.option{ width:104px; height:104px; font-size:12.5px; }
  .gnode.root-node{ text-shadow:0 1px 3px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.4); }

  /* distintivo "+": marca qué nodos tienen más elementos adentro y se
     pueden abrir con un clic; los nodos finales no lo llevan y su cursor
     y borde avisan que ahí termina esa rama. */
  .gnode.option.expandable::after{
    content:"+"; position:absolute; right:-3px; bottom:-3px; width:25px; height:25px;
    border-radius:50%; background:var(--gold-1); color:#241a06;
    display:flex; align-items:center; justify-content:center;
    font-family:'Cinzel', Georgia, serif; font-weight:700; font-size:15px; line-height:1;
    box-shadow:0 3px 8px rgba(0,0,0,.5), 0 0 0 2px rgba(6,13,28,.95);
    animation: badgePulse 2.2s ease-in-out infinite;
  }
  @keyframes badgePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.16); } }
  .gnode.option:not(.expandable){ border-style:dashed; cursor:default; opacity:.82; }
  .gnode.option:not(.expandable):hover{ transform:translate(-50%,-50%) scale(1.04); }

  /* tooltip: solo aparece con el mouse encima, pegado al nodo. Se abre hacia
     el lado (o hacia arriba/abajo si el nodo está centrado) que le sobre
     espacio (--tx/--ty controlan el desplazamiento, --tox/--toy el origen
     de la animación), para que el cuadro nunca se salga del marco. */
  .gtip{
    position:absolute; transform:translate(var(--tx,0%),var(--ty,-50%)); width:250px; z-index:8;
    background:linear-gradient(180deg, rgba(18,28,48,.97), rgba(8,14,26,.97));
    border:1px solid rgba(255,255,255,.25); border-left:3px solid var(--accent, var(--gold-0));
    border-radius:4px 14px 14px 4px; padding:14px 16px; box-shadow:0 16px 34px rgba(0,0,0,.55);
    pointer-events:none; opacity:0; transform-origin:var(--tox,0%) var(--toy,50%);
    transition:opacity .18s ease, transform .18s ease;
  }
  .gtip.show{ opacity:1; transform:translate(var(--tx,0%),var(--ty,-50%)) scale(1); }
  .gtip:not(.show){ transform:translate(var(--tx,0%),var(--ty,-50%)) scale(.94); }
  .gtip .tipname{ display:block; font-family:'Playfair Display', Georgia, serif; font-weight:700; color:var(--white); font-size:14.5px; margin-bottom:6px; }
  .gtip .proplabel{ display:block; font-family:'Cinzel', Georgia, serif; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-1); margin-bottom:6px; }
  .gtip p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--text-light); font-weight:300; text-align:left; }

  footer#pagefooter{ position:relative; z-index:1; text-align:center; padding:24px 16px 34px; color:var(--text-dim); font-size:12px; letter-spacing:.05em; }

  @media (max-width:640px){
    .medallion-wrap{ width:78vw; }
    #topbar{ flex-wrap:wrap; }
    .gnode{ width:106px; height:106px; font-size:13.5px; }
    .gnode.ancestor{ width:78px; height:78px; font-size:11.5px; }
    .gnode.option{ width:96px; height:96px; font-size:12.5px; }
    .gnode.option.expandable::after{ width:24px; height:24px; font-size:14.5px; }
    .gtip{ width:min(86vw, 320px); }
    .gtip .tipname{ font-size:17px; }
    .gtip .proplabel{ font-size:10.5px; }
    .gtip p{ font-size:15px; line-height:1.65; }
  }

/* ---- sitio_web: foto real del candidato y enlace al currículum ---- */
.cand-avatar{ overflow:hidden; }
.cand-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.cand-cv{ font-size:11px; letter-spacing:.06em; color:var(--gold-1); text-decoration:none; border-bottom:1px solid rgba(230,200,119,.4); padding-bottom:1px; }
.cand-cv:hover{ color:var(--white); border-bottom-color:var(--white); }
.cand-more{ font-size:10.5px; letter-spacing:.08em; color:var(--gold-1); opacity:.85; }
.candidate:hover .cand-more{ opacity:1; color:var(--white); }
/* nodo central del currículum: foto (o ícono) del candidato con su nombre debajo */
.gnode.cand-node{ overflow:visible; color:var(--gold-0); }
.gnode.cand-node .cand-node-icon{ display:flex; width:55%; height:55%; color:#8a6d2b; }
.gnode.cand-node .cand-node-icon svg{ width:100%; height:100%; }
#graphCaption{
  position:absolute; top:78px; left:50%; transform:translateX(-50%); z-index:5;
  text-align:center; pointer-events:none; max-width:92vw;
}
#graphCaption.hidden{ display:none; }
#graphCaption b{ display:block; font-family:'Playfair Display', Georgia, serif; font-size:20px; color:var(--white); }
#graphCaption small{ display:block; font-family:'Cinzel', Georgia, serif; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-1); margin-top:4px; }
@media (max-width:640px){ #graphCaption{ top:64px; } #graphCaption b{ font-size:17px; } }
/* cargos largos: que envuelvan en pantallas angostas en vez de desbordar */
.candidate{ text-align:center; max-width:220px; }
@media (max-width:640px){ .candidate{ max-width:44vw; } .cand-role{ line-height:1.35; } }
.gtip.wide{ width:360px; max-width:90vw; }
@media (max-width:640px){ .gtip.wide{ width:min(90vw, 360px); } }