/* ============================================================
   EMTURIN · Grupo de Investigación — sistema visual
   Académico moderno. Azules del logo + acento configurable.
   ============================================================ */

/* ---------- Tokens base ---------- */
:root{
  --font-head:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Figtree', system-ui, sans-serif;
  --accent:#1f6fe0;
  --fs-base:17px;
  --radius:16px;

  /* Marca (degradado del logo) */
  --brand-1:#5aa7e8;
  --brand-2:#1d4f9e;
  --brand-3:#102a56;
  --grad-brand:linear-gradient(135deg,var(--brand-1),var(--brand-3));

  /* Acento derivado */
  --accent-strong:color-mix(in oklab, var(--accent), #000 16%);
  --accent-soft:color-mix(in oklab, var(--accent), #fff 86%);
  --accent-line:color-mix(in oklab, var(--accent), #fff 70%);
  --on-accent:#fff;

  /* Escala de espacio (la densidad la reescala) */
  --su:1;
  --s1:calc(4px * var(--su));
  --s2:calc(8px * var(--su));
  --s3:calc(12px * var(--su));
  --s4:calc(16px * var(--su));
  --s5:calc(24px * var(--su));
  --s6:calc(32px * var(--su));
  --s7:calc(48px * var(--su));
  --s8:calc(64px * var(--su));
  --s9:calc(96px * var(--su));
  --section-y:clamp(48px, calc(7vw * var(--su)), 120px);
  --maxw:1200px;
}

/* ---------- Tema claro ---------- */
:root[data-theme="light"]{
  --bg:#ffffff;
  --bg-soft:#f3f7fc;
  --bg-deep:#0c1f3c;
  --surface:#ffffff;
  --surface-2:#f6f9fd;
  --ink:#0e2240;
  --text:#3a4860;
  --muted:#6c7a93;
  --line:#e6ecf5;
  --line-strong:#d2dcea;
  --shadow-1:0 1px 2px rgba(16,42,86,.06);
  --shadow-2:0 6px 22px -8px rgba(16,42,86,.16);
  --shadow-3:0 22px 60px -22px rgba(16,42,86,.30);
}

/* ---------- Tema oscuro ---------- */
:root[data-theme="dark"]{
  --bg:#081424;
  --bg-soft:#0c1c31;
  --bg-deep:#060f1c;
  --surface:#0f2138;
  --surface-2:#13263f;
  --ink:#eaf2fc;
  --text:#b6c6dd;
  --muted:#8295b1;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 26px -10px rgba(0,0,0,.55);
  --shadow-3:0 26px 70px -24px rgba(0,0,0,.7);
  --brand-1:#6fb2ec;
  --accent-soft:color-mix(in oklab, var(--accent), #0b1a30 78%);
  --accent-line:color-mix(in oklab, var(--accent), #0b1a30 55%);
}

/* ---------- Densidad ---------- */
:root[data-density="compact"]{ --su:.84; }
:root[data-density="regular"]{ --su:1; }
:root[data-density="comfy"]{ --su:1.2; }

/* ---------- Estilo de tarjeta ---------- */
:root[data-cards="suave"]{ --card-border:1px solid var(--line); --card-shadow:var(--shadow-2); --card-shadow-hover:var(--shadow-3); }
:root[data-cards="nitido"]{ --card-border:1.5px solid var(--line-strong); --card-shadow:none; --card-shadow-hover:var(--shadow-2); }
:root[data-cards="plano"]{ --card-border:1px solid var(--line); --card-shadow:none; --card-shadow-hover:none; }

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background .35s ease,color .35s ease;
}
/* Fondo según Tweak */
:root[data-bg="sutil"] body{
  background-image:radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--ink), transparent 92%) 1px, transparent 0);
  background-size:26px 26px;
}
:root[data-bg="degradado"] body{
  background-image:radial-gradient(900px 500px at 85% -8%, var(--accent-soft), transparent 60%),
                   radial-gradient(800px 460px at -8% 8%, color-mix(in oklab,var(--brand-1),transparent 80%), transparent 60%);
  background-attachment:fixed;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid color-mix(in oklab,var(--accent),#fff 22%);
  outline-offset:3px;
}

h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.08;margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
::selection{background:color-mix(in oklab,var(--accent),transparent 70%);color:var(--ink)}

/* ---------- Utilidades layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.section{padding-block:var(--section-y)}
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-head);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.section-head{max-width:62ch;margin-bottom:var(--s6)}
.section-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin-top:var(--s3)}
.section-head p{margin-top:var(--s3);color:var(--muted);font-size:1.05rem}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--text)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--font-head);font-weight:600;font-size:.95rem;
  padding:calc(var(--s3) + 1px) var(--s5);border-radius:calc(var(--radius) * .7);
  border:1.5px solid transparent;cursor:pointer;transition:.2s ease;white-space:nowrap;
}
.btn svg{width:1.05em;height:1.05em}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 20px -10px color-mix(in oklab,var(--accent),transparent 30%)}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn-light:hover{background:rgba(255,255,255,.22)}

/* ---------- Cabecera ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:color-mix(in oklab,var(--bg),transparent 16%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .3s,border-color .3s;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:74px}
.brand{display:flex;align-items:center;gap:0}
.brand img{height:38px;width:auto;max-width:none}
.brand .logo-dark{display:none}
:root[data-theme="dark"] .brand .logo-light{display:none}
:root[data-theme="dark"] .brand .logo-dark{display:block}
.nav-links{display:flex;align-items:center;gap:var(--s2);list-style:none;margin:0;padding:0}
.nav-links a{
  font-family:var(--font-head);font-weight:500;font-size:.95rem;color:var(--text);
  padding:var(--s2) var(--s3);border-radius:10px;transition:.18s;position:relative;
}
.nav-links a:hover{color:var(--ink);background:var(--surface-2)}
.nav-links a.active{color:var(--accent)}
.nav-links a.active::after{content:"";position:absolute;left:var(--s3);right:var(--s3);bottom:2px;height:2px;background:var(--accent);border-radius:2px}
.nav-cta{display:flex;align-items:center;gap:var(--s3)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;border-radius:10px;color:var(--ink)}
.nav-toggle:hover{background:var(--surface-2)}

@media(max-width:920px){
  .nav-links{
    position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:var(--s3);
    box-shadow:var(--shadow-2);transform:translateY(-8px);opacity:0;visibility:hidden;
    pointer-events:none;transition:transform .22s,opacity .22s,visibility 0s linear .22s;
  }
  .nav-links.open{transform:none;opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
  .nav-links a{padding:var(--s3) var(--s4);font-size:1.05rem}
  .nav-links a.active::after{display:none}
  .nav-toggle{display:grid;place-items:center}
  .nav-cta .btn-text{display:none}
}

/* ---------- Navegación: desplegable "Investigación" + estado ---------- */
.nav-links>li>a,.nav-drop-btn{display:inline-flex;align-items:center;gap:7px}
.nav-drop{position:relative}
.nav-drop-btn{font-family:var(--font-head);font-weight:500;font-size:.95rem;color:var(--text);
  padding:var(--s2) var(--s3);border-radius:10px;background:none;border:0;cursor:pointer;transition:.18s}
.nav-drop-btn:hover,.nav-drop:hover .nav-drop-btn,.nav-drop[data-open="1"] .nav-drop-btn{color:var(--ink);background:var(--surface-2)}
.nav-drop.active .nav-drop-btn{color:var(--accent)}
.nav-drop-btn .chev{width:15px;height:15px;opacity:.65;transition:transform .2s}
.nav-drop:hover .nav-drop-btn .chev,.nav-drop[data-open="1"] .nav-drop-btn .chev{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:238px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-3);
  padding:6px;display:flex;flex-direction:column;gap:2px;z-index:120;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top left;
  pointer-events:none;transition:transform .18s ease,opacity .18s ease,visibility 0s linear .18s}
.nav-drop:hover .nav-drop-menu,.nav-drop[data-open="1"] .nav-drop-menu{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s
}
/* Puente invisible que cubre el hueco entre el botón y el menú,
   para que el desplegable no se cierre al mover el ratón hacia los enlaces */
.nav-drop-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-drop-menu a{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:10px 12px;border-radius:9px;font-family:var(--font-head);font-weight:500;font-size:.92rem;color:var(--text);transition:.15s}
.nav-drop-menu a:hover{background:var(--surface-2);color:var(--ink)}
.nav-drop-menu a.active{color:var(--accent);background:var(--accent-soft)}

/* Logos de RRSS en la cabecera */
.nav-social{display:flex;align-items:center;gap:2px;margin-right:var(--s1)}
.nav-social a{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;color:var(--muted);transition:.16s}
.nav-social a:hover{color:var(--accent);background:var(--surface-2);transform:translateY(-1px)}
.nav-social svg{width:17px;height:17px}
@media(max-width:980px){.nav-social{display:none}}

/* Indicador de estado de cada página */
.nav-st{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.nav-st[data-st="done"]{background:#1f8a5b;box-shadow:0 0 0 3px color-mix(in oklab,#1f8a5b,transparent 84%)}
.nav-st[data-st="progress"]{background:#d6920f;box-shadow:0 0 0 3px color-mix(in oklab,#d6920f,transparent 82%);animation:navpulse 1.9s ease-in-out infinite}
.nav-st[data-st="pending"]{background:transparent;border:1.6px solid var(--line-strong)}
@keyframes navpulse{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.nav-st{animation:none}}

@media(max-width:920px){
  .nav-drop{width:100%}
  .nav-drop-btn{width:100%;justify-content:flex-start;padding:var(--s3) var(--s4);font-size:1.05rem}
  .nav-drop-btn .chev{margin-left:auto}
  .nav-drop-menu{position:static;opacity:1;transform:none;pointer-events:none;
    visibility:hidden;box-shadow:none;border:0;background:transparent;padding:0 0 var(--s2) var(--s5);min-width:0}
  .nav-links.open .nav-drop-menu{visibility:visible;pointer-events:auto}
  .nav-drop-menu a{padding:var(--s3) var(--s4);font-size:1rem}
}

/* ---------- Tarjeta genérica ---------- */
.card{
  background:var(--surface);border:var(--card-border);border-radius:var(--radius);
  box-shadow:var(--card-shadow);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

/* ---------- Pie ---------- */
.site-footer{background:var(--bg-deep);color:#cbd9ee;padding-block:var(--s8) var(--s5);margin-top:var(--s8)}
.site-footer a{color:#cbd9ee}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:var(--s6)}
.site-footer h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--s4);font-weight:600}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.footer-links a,.footer-links span{color:#9fb3d4;font-size:.95rem;transition:.18s}
.footer-links a:hover{color:#fff}
.footer-brand img{height:40px;margin-bottom:var(--s4)}
.footer-brand p{color:#8ea3c6;font-size:.92rem;max-width:30ch}
.footer-brand .footer-uex-logo{height:36px;margin-top:var(--s4);margin-bottom:0;display:block}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s3);
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.1);
  color:#7d93b8;font-size:.85rem}
.footer-legal{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.footer-legal a{color:#9fb3d4;font-size:.85rem}
.footer-legal a:hover{color:#fff}
.footer-social{display:flex;gap:var(--s2)}
.footer-social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;transition:.2s}
.footer-social a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px}
@media(max-width:820px){
  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"brand location" "nav group";
    column-gap:var(--s6);row-gap:var(--s6)
  }
  .footer-brand{grid-area:brand}
  .footer-nav{grid-area:nav}
  .footer-group{grid-area:group}
  .footer-location{
    grid-area:location;padding-left:var(--s5);
    border-left:1px solid rgba(255,255,255,.1)
  }
}
@media(max-width:560px){
  .site-footer{padding-block:var(--s7) var(--s5)}
  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"brand brand" "nav group" "location location";
    column-gap:var(--s4);row-gap:var(--s6)
  }
  .site-footer h4{margin-bottom:var(--s3)}
  .footer-location{
    padding-top:var(--s4);padding-left:0;
    border-top:1px solid rgba(255,255,255,.1);border-left:0
  }
  .footer-bottom{margin-top:var(--s6);align-items:flex-start;flex-direction:column}
}

/* ---------- Animación de entrada (solo transform, robusta) ----------
   La opacidad SIEMPRE es 1: el contenido nunca queda invisible (ni en
   capturas/PDF ni si falla el JS). El movimiento es un ligero desplazamiento. */
.reveal{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .reveal.in{animation:revealUp .6s cubic-bezier(.2,.7,.3,1)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@keyframes revealUp{from{transform:translateY(20px)}to{transform:none}}