@import url('https://fonts.googleapis.com/css2?family=Sora:wght@200;300;400;500;600;700;800&display=swap');

:root{
  --brand-deep: #102C43;
  --brand-turq: #00A9A9;
  --brand-blue: #5264AC;
  --ink-0: #04101B;
  --ink-2: #0B2238;
  --line: rgba(180,210,235,.10);
  --line-strong: rgba(180,210,235,.18);
  --text: #E8EEF4;
  --text-soft: #B7C4D2;
  --text-mute: #7C8A9B;
  --display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --maxw: 1280px;
  --pad: clamp(20px, 4vw, 56px);
  --n-pad: clamp(20px, 4vw, 56px);
}

/* ─── Reset (igual que el resto del sitio) ─────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--display);
  background: var(--ink-0);
  color:var(--text);
  line-height:1.55;
  font-size:16px;
  font-weight:400;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--brand-turq); color:var(--ink-0); }

/* Misma base atmosférica que la home (estado "deep", sin scroll-morph) */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(0,169,169,.10), transparent 60%),
    radial-gradient(900px 600px at -10% 30%, rgba(82,100,172,.08), transparent 60%),
    radial-gradient(1000px 800px at 50% 120%, rgba(16,44,67,.7), transparent 70%),
    linear-gradient(180deg, #04101B 0%, #06151F 40%, #04101B 100%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.5; mix-blend-mode:overlay;
}

/* Primitivas del sitio que usan el nav/footer reales importados */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:600; letter-spacing:.08em; font-size:14px; }

/* ─── Tipografía (idéntica a las reglas globales del sitio) ── */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:-0.025em; line-height:1.06; margin:0; text-wrap:balance; }
p{ margin:0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand-turq); font-family:var(--display);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--brand-turq); display:inline-block; }
.lede{ font-size:clamp(16px,1.2vw,18px); color:var(--text-soft); max-width:60ch; line-height:1.65; }

.sect-head{ display:grid; grid-template-columns:200px 1fr; gap:48px; margin-bottom:56px; align-items:start; }
.sect-head .num{
  font-family:var(--display); font-weight:300; font-size:13px; letter-spacing:.3em;
  color:var(--text-mute); padding-top:14px; border-top:1px solid var(--line);
}
@media (max-width:760px){ .sect-head{ grid-template-columns:1fr; gap:24px; } }

.n-page{ max-width:820px; margin:0 auto; padding:150px var(--n-pad) 96px; position:relative; z-index:1; }
.n-page--wide{ max-width:900px; }

.n-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 20px;
  font-size:13px; color:var(--text-mute); letter-spacing:.02em;
}
.n-cat-link{
  color:var(--brand-turq); border:1px solid rgba(0,169,169,.35); background:rgba(0,169,169,.08);
  padding:4px 10px; border-radius:999px; font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; text-decoration:none; transition:background .2s;
}
.n-cat-link:hover{ background:rgba(0,169,169,.2); }

.n-title{ font-size:clamp(32px,4.4vw,52px); font-weight:500; letter-spacing:-0.028em; color:#fff; margin-bottom:20px; }
.n-lede{ font-size:clamp(17px,1.3vw,19px); color:var(--text-soft); max-width:65ch; margin:0 0 44px; font-weight:400; line-height:1.65; }

.n-article{ padding-top:8px; }
.n-block{ margin:0 0 32px; }
.n-text p{ margin:0 0 18px; font-size:17px; color:var(--text); line-height:1.7; }
.n-text a{ color:var(--brand-turq); text-decoration:underline; text-underline-offset:3px; }

.n-img img{ border-radius:14px; }
.n-img--ancho img{ width:100%; }
.n-img--izquierda, .n-img--derecha{ display:flow-root; }
.n-img--izquierda img{ float:left; width:45%; margin:0 24px 12px 0; }
.n-img--derecha img{ float:right; width:45%; margin:0 0 12px 24px; }
figcaption{ font-size:13px; color:var(--text-mute); margin-top:8px; }

.n-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.n-gallery img{ aspect-ratio:1/1; object-fit:cover; width:100%; border-radius:10px; cursor:zoom-in; transition:opacity .2s; }
.n-gallery img:hover{ opacity:.85; }
.n-gallery img:focus-visible{ outline:2px solid var(--brand-turq); outline-offset:2px; }

.video-embed{ position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden; background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.n-allnews{
  display:inline-block; margin-top:24px; color:var(--brand-turq); text-decoration:none;
  font-weight:600; font-size:14px; border-bottom:1px solid currentColor; padding-bottom:2px;
}

/* Listado a una columna (índice y páginas de categoría) */
.n-list{ display:flex; flex-direction:column; gap:28px; padding:16px 0 0; }
.n-list-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.02);
  transition:border-color .2s, transform .2s;
}
.n-list-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.n-list-card img, .n-list-noimg{ width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:0; }
.n-list-noimg{ background:linear-gradient(135deg, #0B2238, #102C43); }
.n-list-card .n-card-body{ padding:28px; }
.n-list-card .n-card-body h2{ font-size:22px; margin:0 0 10px; color:#fff; font-weight:600; letter-spacing:-0.02em; line-height:1.25; text-wrap:balance; }
.n-list-card .n-card-body p{ margin:0; color:var(--text-soft); font-size:15px; line-height:1.6; font-weight:400; letter-spacing:normal; }

.news-empty{ color:var(--text-mute); font-size:14px; }

.n-pagination{ display:flex; gap:10px; justify-content:center; margin-top:48px; flex-wrap:wrap; }
.n-pagination a{
  display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px;
  border:1px solid var(--line); border-radius:8px; text-decoration:none; color:var(--text-soft); font-size:14px;
  transition:border-color .2s, color .2s;
}
.n-pagination a:hover{ border-color:var(--line-strong); color:var(--text); }
.n-pagination a.is-current{ border-color:var(--brand-turq); color:var(--brand-turq); font-weight:700; }

/* Lightbox */
.n-lightbox-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(4,16,27,.94);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.n-lightbox-overlay[hidden]{ display:none; }
.n-lightbox-img{ max-width:min(90vw, 1100px); max-height:78vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.n-lightbox-caption{ position:absolute; bottom:64px; left:0; right:0; text-align:center; color:var(--text-soft); font-size:14px; padding:0 24px; }
.n-lightbox-count{ position:absolute; top:24px; left:24px; color:var(--text-mute); font-size:13px; letter-spacing:.04em; }
.n-lightbox-close, .n-lightbox-prev, .n-lightbox-next{
  position:absolute; background:rgba(255,255,255,.06); border:1px solid var(--line-strong); color:var(--text);
  border-radius:999px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; transition:background .2s;
}
.n-lightbox-close:hover, .n-lightbox-prev:hover, .n-lightbox-next:hover{ background:rgba(255,255,255,.14); }
.n-lightbox-close{ top:20px; right:20px; }
.n-lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
.n-lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
@media (max-width:640px){
  .n-lightbox-prev, .n-lightbox-next{ width:36px; height:36px; font-size:16px; }
}

@media (max-width: 640px){
  .n-img--izquierda img, .n-img--derecha img{ float:none; width:100%; margin:0 0 12px; }
  .n-gallery{ grid-template-columns:1fr 1fr; }
  .n-page{ padding-top:126px; }
}
