/* =========================================================
   LYCEUM JOURNAL — ARTÍCULO
   Capa específica sobre /assets/css/lyceum-ui.css
   Referencia visual: Index público actual de Lyceum.
   ========================================================= */

/* El artículo comparte el hero oscuro con el lenguaje del Index.
   El navbar queda flotando sobre la primera zona, no sobre una franja marfil. */
body.ly-page{
  padding-top:0;
  background:var(--ivory2);
}

/* ---------------- HERO ---------------- */

.ly-article-hero{
  position:relative;
  overflow:hidden;
  min-height:332px;
  padding:108px 0 48px;
  color:#fff;
  background:linear-gradient(90deg,var(--navy) 0%,var(--navy2) 100%);
  border-bottom:1px solid rgba(229,169,54,.14);
}

.ly-article-hero::before{
  content:"";
  position:absolute;
  right:-54px;
  top:58px;
  width:180px;
  height:180px;
  border:1px solid rgba(229,169,54,.25);
  border-radius:50%;
  box-shadow:
    0 0 0 34px rgba(229,169,54,.020),
    0 0 0 68px rgba(229,169,54,.012);
  pointer-events:none;
}

.ly-article-hero::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:92px;
  height:92px;
  background:linear-gradient(145deg,var(--gold2),var(--gold));
  clip-path:polygon(100% 0,100% 100%,0 100%);
  opacity:.95;
  pointer-events:none;
}

.ly-article-hero__inner{
  position:relative;
  z-index:2;
  width:min(calc(100% - 44px),1180px);
  margin-inline:auto;
}

.ly-article-hero .ly-kicker{
  margin-bottom:20px;
  color:var(--gold2);
}

.ly-article-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  margin-bottom:18px;
  color:rgba(255,255,255,.60);
  font-size:.56rem;
  letter-spacing:.02em;
}

.ly-article-hero .ly-badge--blue{
  color:#fff;
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
}

.ly-article-hero .ly-badge--gold{
  color:var(--gold2);
  border-color:rgba(229,169,54,.32);
  background:rgba(229,169,54,.08);
}

.ly-article-title{
  max-width:900px;
  font-size:clamp(3rem,5.3vw,5.1rem);
  line-height:.94;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.ly-article-deck{
  max-width:650px;
  margin:18px 0 0;
  color:rgba(255,255,255,.74);
  font-size:.78rem;
  line-height:1.72;
}

/* ---------------- ZONA DE LECTURA ---------------- */

main > .ly-section--compact{
  position:relative;
  padding:54px 0 62px;
  background:linear-gradient(90deg,#f2ebe0 0%,var(--ivory2) 100%);
  border-bottom:1px solid var(--line);
}

.ly-article-layout{
  display:grid;
  grid-template-columns:minmax(0,760px) 238px;
  justify-content:space-between;
  align-items:start;
  gap:64px;
}

/* El contenido largo debe ser más legible que el microcopy del Index,
   pero conserva su ritmo editorial. */
.ly-article-body{
  min-width:0;
  color:var(--ink);
  font-size:.94rem;
  line-height:1.86;
}

.ly-article-body > *:first-child{
  margin-top:0;
}

.ly-article-body p{
  margin:0 0 1.45em;
}

.ly-article-body h2,
.ly-article-body h3,
.ly-article-body h4{
  font-family:var(--serif);
  font-weight:500;
  color:var(--ink);
  text-wrap:balance;
}

.ly-article-body h2{
  margin:2.1em 0 .62em;
  font-size:clamp(1.85rem,2.5vw,2.65rem);
  line-height:1.05;
  letter-spacing:-.025em;
}

.ly-article-body h3{
  margin:1.8em 0 .58em;
  font-size:1.38rem;
  line-height:1.12;
}

.ly-article-body h4{
  margin:1.6em 0 .5em;
  font-size:1.12rem;
}

.ly-article-body strong{
  font-weight:650;
  color:var(--navy);
}

.ly-article-body em{
  color:#34485b;
}

.ly-article-body a{
  color:#8c620d;
  text-decoration:underline;
  text-decoration-color:rgba(229,169,54,.55);
  text-underline-offset:3px;
}

.ly-article-body ul,
.ly-article-body ol{
  margin:0 0 1.55em;
  padding-left:1.35em;
}

.ly-article-body li{
  margin:.45em 0;
  padding-left:.2em;
}

.ly-article-body blockquote{
  position:relative;
  margin:2em 0;
  padding:22px 26px 22px 28px;
  border-left:2px solid var(--gold);
  background:rgba(255,255,255,.35);
  font-family:var(--serif);
  font-size:1.32rem;
  line-height:1.45;
  color:var(--navy);
}

.ly-article-body hr{
  height:1px;
  margin:38px 0;
  border:0;
  background:var(--line);
}

/* ---------------- IDEA CLAVE ---------------- */

.ly-idea-clave{
  position:relative;
  overflow:hidden;
  margin:38px 0 8px;
  padding:28px 32px 30px;
  color:#fff;
  background:linear-gradient(90deg,var(--navy),var(--navy2));
  border:1px solid rgba(229,169,54,.15);
}

.ly-idea-clave::after{
  content:"";
  position:absolute;
  right:-25px;
  bottom:-25px;
  width:76px;
  height:76px;
  border:1px solid rgba(229,169,54,.34);
  border-radius:50%;
}

.ly-idea-clave__label{
  margin-bottom:10px;
  color:var(--gold);
  font-size:.54rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ly-idea-clave__text{
  max-width:610px;
  font-family:var(--serif);
  font-size:1.45rem;
  font-weight:500;
  line-height:1.38;
}

/* ---------------- SIDEBAR ---------------- */

.ly-article-side{
  position:sticky;
  top:94px;
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid rgba(8,31,52,.16);
}

.ly-article-side-card.ly-glass{
  padding:22px 0 24px;
  border:0;
  border-bottom:1px solid rgba(8,31,52,.14);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.ly-article-side-card .ly-kicker{
  margin-bottom:9px;
  color:#916713;
}

.ly-article-side-card h3{
  margin:0;
  font-family:var(--serif);
  font-size:1.18rem;
  font-weight:500;
  line-height:1.08;
  color:var(--navy);
}

.ly-article-side-card p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.63rem;
  line-height:1.62;
}

/* ---------------- RELACIONADOS ---------------- */

main > .ly-section:not(.ly-section--compact){
  position:relative;
  overflow:hidden;
  padding:48px 0 54px;
  color:#fff;
  background:linear-gradient(90deg,var(--navy),var(--navy2));
  border-top:0;
}

main > .ly-section:not(.ly-section--compact)::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:92px;
  height:92px;
  border-left:1px solid rgba(229,169,54,.13);
  border-bottom:1px solid rgba(229,169,54,.13);
  pointer-events:none;
}

main > .ly-section .ly-section-label__line{
  background:rgba(255,255,255,.30);
}

main > .ly-section .ly-section-label__text{
  color:rgba(255,255,255,.82);
}

main > .ly-section .ly-title{
  max-width:640px;
  color:#fff;
  font-size:clamp(2rem,3.2vw,3.25rem);
}

.ly-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:26px;
  border-top:1px solid rgba(255,255,255,.13);
}

.ly-related-card.ly-glass{
  min-height:190px;
  padding:22px 24px 22px 0;
  border:0;
  border-right:1px solid rgba(255,255,255,.13);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.ly-related-card.ly-glass + .ly-related-card{
  padding-left:24px;
}

.ly-related-card:last-child{
  border-right:0;
}

.ly-related-card .ly-badge--blue{
  color:rgba(255,255,255,.82);
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.055);
}

.ly-related-card h3{
  margin:16px 0 9px;
  font-family:var(--serif);
  font-size:1.28rem;
  font-weight:500;
  line-height:1.08;
  color:#fff;
}

.ly-related-card p{
  margin:0;
  max-width:310px;
  color:rgba(255,255,255,.60);
  font-size:.62rem;
  line-height:1.58;
}

.ly-related-card > a{
  display:inline-block;
  margin-top:18px;
  color:var(--gold2);
  font-size:.60rem;
  font-weight:600;
}

.ly-related-card.ly-card--interactive:hover{
  transform:none;
  border-color:rgba(255,255,255,.13);
  box-shadow:none;
}

.ly-related-card:hover h3{
  color:var(--gold2);
}

/* ---------------- 404 ---------------- */

body.ly-page > .ly-section--hero{
  min-height:100vh;
  padding-top:140px;
  color:#fff;
  background:linear-gradient(90deg,var(--navy),var(--navy2));
}

body.ly-page > .ly-section--hero .ly-title{
  color:#fff;
}

/* ---------------- RESPONSIVE ---------------- */

@media (max-width:940px){
  .ly-article-layout{
    grid-template-columns:minmax(0,1fr) 210px;
    gap:42px;
  }
}

@media (max-width:760px){
  body.ly-page{
    padding-top:0;
    padding-bottom:0;
  }

  .ly-article-hero{
    min-height:auto;
    padding:94px 0 42px;
  }

  .ly-article-hero__inner{
    width:min(calc(100% - 28px),1180px);
  }

  .ly-article-hero::before{
    right:-92px;
    top:74px;
    opacity:.70;
  }

  .ly-article-hero::after{
    width:60px;
    height:60px;
  }

  .ly-article-title{
    font-size:clamp(2.65rem,12vw,4rem);
  }

  .ly-article-deck{
    font-size:.75rem;
  }

  main > .ly-section--compact{
    padding:40px 0 46px;
  }

  .ly-article-layout{
    grid-template-columns:1fr;
    gap:38px;
  }

  .ly-article-side{
    position:static;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    border-top:1px solid rgba(8,31,52,.16);
  }

  .ly-article-side-card.ly-glass{
    border-bottom:0;
  }

  .ly-related-grid{
    grid-template-columns:1fr;
  }

  .ly-related-card.ly-glass,
  .ly-related-card.ly-glass + .ly-related-card{
    min-height:auto;
    padding:20px 0 22px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.13);
  }

  .ly-related-card:last-child{
    border-bottom:0;
  }
}

@media (max-width:480px){
  .ly-article-meta{
    gap:7px;
  }

  .ly-article-body{
    font-size:.91rem;
    line-height:1.82;
  }

  .ly-article-body blockquote{
    padding:18px 20px;
    font-size:1.18rem;
  }

  .ly-idea-clave{
    padding:24px 22px 26px;
  }

  .ly-idea-clave__text{
    font-size:1.28rem;
  }

  .ly-article-side{
    grid-template-columns:1fr;
    gap:0;
  }

  .ly-article-side-card.ly-glass{
    border-bottom:1px solid rgba(8,31,52,.14);
  }
}