:root {
  --bg: #06172a;
  --nav: #071b31;
  --nav2: #0b3155;
  --blue: #0d4f86;
  --cyan: #9de9ff;
  --ink: #092746;
  --muted: #667d94;
  --paper: #fbfdff;
  --line: #c7d7e5;
  --orange: #e87910;
  --green: #4a9d3b;
  --purple: #7160a8;
  --red: #ca4a3b;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 10%, rgba(126, 208, 244, .32), transparent 28%),
    radial-gradient(circle at 12% 78%, rgba(45, 122, 177, .24), transparent 30%),
    linear-gradient(135deg, #06172a 0%, #08233e 45%, #020910 100%);
  color: white;
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  background: linear-gradient(180deg, #092947, #06172b);
  border-right: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  z-index: 30;
}

.school-seal {
  height: 224px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(157, 233, 255, .34), transparent 54%),
    linear-gradient(180deg, #0d3c64, #08233e);
  text-decoration: none;
}

.school-seal img {
  width: 154px;
  height: 154px;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, .74),
    0 0 24px rgba(157, 233, 255, .86),
    0 0 48px rgba(59, 151, 217, .48);
  border: 3px solid rgba(9, 80, 132, .72);
}

.side-nav { display: flex; flex-direction: column; }

.side-nav a {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 26px;
  color: #e5f4ff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: .04em;
}

.side-nav a.active,
.side-nav a:hover { background: rgba(46, 146, 213, .48); }

.nav-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  font-size: .9rem;
}

.sidebar-note {
  margin-top: auto;
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .75rem;
}

.sidebar-note strong,
.sidebar-note span { display: block; }

.sidebar-note span { margin-top: 8px; color: #9fc9e9; }

.app-shell { margin-left: 250px; min-height: 100vh; }

.topbar {
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 32px;
  background: rgba(2, 12, 25, .78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  position: sticky;
  top: 0;
  z-index: 25;
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
  text-transform: uppercase;
  text-decoration: none;
}

.brand strong {
  font-size: 3rem;
  letter-spacing: .08em;
  font-weight: 400;
}

.brand span {
  font-size: .82rem;
  letter-spacing: .08em;
  line-height: 1.35;
  border-left: 1px solid rgba(255, 255, 255, .5);
  padding-left: 18px;
}

.issue-data {
  font-size: .86rem;
  letter-spacing: .12em;
  white-space: nowrap;
}

.issue-data b { padding: 0 16px; color: #8aaed0; }

.top-actions { display: flex; gap: 12px; }

.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: white;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.sidebar-backdrop { display: none; }

.top-actions a,
.download-link,
.info-band a,
.catalog-grid a {
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
  color: white;
  border-radius: 8px;
  padding: 11px 14px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: .76rem;
}

.reader-stage {
  height: calc(100vh - 155px);
  min-height: 720px;
  display: grid;
  grid-template-columns: 78px 1fr 78px;
  align-items: center;
  padding: 22px 18px 0;
}

.book-wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 34px 32px rgba(0, 0, 0, .45));
  transition: margin .42s ease;
}

.reader-stage.cover-focus-start .book-wrap {
  margin-left: -25%;
  margin-right: 25%;
}

.reader-stage.cover-focus-end .book-wrap {
  margin-left: 25%;
  margin-right: -25%;
}

.arrow {
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .48);
  color: white;
  font-size: 4rem;
  line-height: 0;
  cursor: pointer;
  z-index: 15;
}

.page {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid #d8dbe0;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .08);
  overflow: hidden;
}

.cover-page { background: #e8f3fb; }
.cover-page img { width: 100%; height: 100%; object-fit: cover; }

.back-cover { background: #f8fbff; }
.back-cover img { width: 100%; height: 100%; object-fit: cover; }

.static-book {
  width: min(1100px, 94vw);
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 18px;
  overflow: auto;
  padding: 10px;
}

.static-book .page {
  min-height: 620px;
}

.page-content {
  padding: 40px 46px;
  height: 100%;
  overflow: hidden;
}

.mini,
.section {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 900;
  font-size: .74rem;
}

.index-page h2,
.opener-page h2,
.article-page h2,
.authors-page h2 {
  font-family: Georgia, serif;
  font-size: 2.35rem;
  line-height: 1.05;
  margin: .25rem 0 14px;
  letter-spacing: 0;
}

.editorial-page h2 {
  font-family: Georgia, serif;
  font-size: 2.08rem;
  line-height: 1.06;
  margin: .25rem 0 12px;
  letter-spacing: 0;
}

.line {
  width: 56px;
  border-bottom: 2px solid var(--blue);
  margin-bottom: 20px;
}

.toc { list-style: none; padding: 0; margin: 0; }

.toc li {
  display: grid;
  grid-template-columns: 52px 1fr 32px;
  gap: 16px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid #9fb0c2;
}

.toc b {
  font-family: Georgia, serif;
  font-size: 1.65rem;
  color: var(--blue);
  font-weight: 400;
}

.toc strong {
  display: block;
  color: var(--blue);
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .04em;
  margin-bottom: 3px;
}

.toc span { font-size: .83rem; line-height: 1.35; }
.toc em { font-style: normal; color: #111; }

.orange, .toc .orange { color: var(--orange) !important; }
.green, .toc .green { color: var(--green) !important; }
.purple, .toc .purple { color: var(--purple) !important; }
.red, .toc .red { color: var(--red) !important; }

.orange-bg { background: var(--orange) !important; }
.green-bg { background: var(--green) !important; }
.purple-bg { background: var(--purple) !important; }
.red-bg { background: var(--red) !important; }
.blue-bg { background: var(--blue) !important; }

.editorial-page,
.opener-page,
.authors-page { background: linear-gradient(180deg, #f9fbff, #eef6fb); }

.editorial-layout p,
.opener-page p,
.article-page p,
.authors-page p {
  line-height: 1.5;
  color: #263b55;
}

.quote-card,
.credit-box {
  margin-top: 20px;
  padding: 16px;
  background: #e8f4fb;
  border-left: 5px solid var(--blue);
  color: #0d3155;
  font-family: Georgia, serif;
  font-size: 1.02rem;
}

.signature {
  margin-top: 28px;
  font-family: Georgia, serif;
  font-size: 1.08rem;
}

.signature span {
  font-family: Inter, sans-serif;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.longform-page .page-content {
  padding: 34px 42px;
}

.longform-page h2 {
  font-size: 1.82rem;
  line-height: 1.08;
  margin-bottom: 14px;
}

.longform-page p {
  font-size: .86rem;
  line-height: 1.44;
  margin: 0 0 10px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.longform-page .quote-card {
  margin-top: 16px;
  padding: 14px;
  font-size: .96rem;
}

.longform-page .quote-card span {
  display: inline-block;
  margin-top: 4px;
  font-family: Inter, sans-serif;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.author-portrait {
  float: right;
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 0 12px 16px;
  border: 3px solid var(--blue);
}

.lead {
  font-size: 1.08rem;
  max-width: 34rem;
}

.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
}

.theme-grid div {
  min-height: 104px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 8px;
  padding: 14px;
}

.theme-grid strong,
.theme-grid small { display: block; }

.theme-grid strong { margin: 10px 0 6px; font-size: 1rem; }
.theme-grid small { color: var(--muted); line-height: 1.32; }
.dot { width: 22px; height: 4px; display: block; }

.article-layout h2 {
  margin-bottom: 7px;
  font-size: 1.96rem;
}

.article-layout .section {
  font-size: .68rem;
  line-height: 1.35;
}

.article-layout p {
  font-size: .9rem;
  line-height: 1.42;
}

.byline {
  color: var(--muted) !important;
  font-size: .76rem !important;
  line-height: 1.35 !important;
  margin-top: 0;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.stat-row div,
.split-note div,
.table-card div {
  background: #f0f7fc;
  border: 1px solid #d9e8f2;
  border-radius: 8px;
  padding: 12px;
}

.stat-row strong {
  display: block;
  font-size: 1.36rem;
  color: var(--orange);
}

.stat-row span,
.split-note span,
.table-card span {
  display: block;
  color: #516b82;
  font-size: .72rem;
  line-height: 1.35;
}

.split-note,
.table-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}

.table-card { grid-template-columns: 1fr; }
.split-note strong,
.table-card strong { display: block; margin-bottom: 7px; }

.finding {
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  font-size: .82rem !important;
}

.download-link {
  display: inline-block;
  margin-top: 4px;
  background: var(--blue);
  color: white;
  padding: 9px 12px;
}

.movement-chart {
  display: grid;
  gap: 12px;
  margin: 24px 0;
}

.movement-chart span {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 36px;
  border-radius: 8px;
  border: 1px solid #d9e8f2;
  padding: 10px 12px;
  color: #17324f;
  font-size: .8rem;
  font-weight: 800;
}

.movement-chart span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: rgba(202, 74, 59, .2);
  z-index: -1;
}

.author-list {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.author-list p {
  margin: 0;
  padding: 17px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
}

.center h2 {
  font-size: 4rem;
  letter-spacing: .16em;
  font-weight: 300;
  margin: 0 0 16px;
}

.center p,
.center small { color: white; }

.bottom-toolbar {
  width: min(980px, 78vw);
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(3, 15, 30, .88);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: 13px 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.bottom-toolbar button {
  width: 40px;
  height: 36px;
  background: transparent;
  color: white;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  font-weight: 800;
  cursor: pointer;
}

#pageInfo {
  min-width: 128px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  padding: 8px 18px;
  text-align: center;
  color: white;
}

.article-catalog {
  padding: 26px 46px 34px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.section-heading p,
.info-band p {
  margin: 0;
  color: #9fc9e9;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  font-size: .75rem;
}

.section-heading h2,
.info-band h2 {
  margin: 6px 0 0;
  font-family: Georgia, serif;
  letter-spacing: 0;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.catalog-grid article {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  padding: 20px;
}

.catalog-grid h3 {
  margin: 12px 0 8px;
  font-family: Georgia, serif;
  font-size: 1.34rem;
}

.catalog-grid p { color: #d8e8f5; line-height: 1.5; min-height: 90px; }

.catalog-grid a {
  display: inline-block;
  border-color: rgba(255, 255, 255, .32);
}

.article-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.js-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: transparent;
  color: #d8e8f5;
  font-size: .9rem;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.js-like-btn .like-icon { color: rgba(255, 255, 255, .55); transition: color .15s ease; }

.js-like-btn:hover:not(:disabled) {
  border-color: rgba(255, 92, 122, .7);
}

.js-like-btn:active:not(:disabled) { transform: scale(.96); }

.js-like-btn.is-liked {
  border-color: rgba(255, 92, 122, .7);
  background: rgba(255, 92, 122, .12);
  color: #fff;
}

.js-like-btn.is-liked .like-icon { color: #ff5c7a; }

.js-like-btn:disabled { cursor: default; }

.tag {
  display: inline-block;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 900;
}

.info-band {
  margin: 12px 46px 60px;
  padding: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07);
  border-radius: 8px;
}

body.view-halo .article-catalog,
body.view-halo main > .info-band {
  display: none;
}

body.view-articles .reader-stage,
body.view-articles .bottom-toolbar,
body.view-articles main > .info-band {
  display: none;
}

body.view-articles .article-catalog {
  min-height: calc(100vh - 108px);
  padding-top: 46px;
}

body.zoomed .reader-stage { min-height: 820px; }
body.zoomed .bottom-toolbar { width: min(1120px, 92vw); }

@media (max-width: 1180px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .top-actions { display: none; }
}

@media (max-width: 1050px) {
  .sidebar { display: none; }
  .app-shell { margin-left: 0; }
  .topbar { flex-wrap: wrap; }
  .menu-toggle { display: inline-flex; }
  body.sidebar-open .sidebar {
    display: flex;
    z-index: 60;
  }
  body.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(1, 8, 18, .6);
    z-index: 55;
  }
  body.sidebar-open { overflow: hidden; }
  .reader-stage.cover-focus-start .book-wrap,
  .reader-stage.cover-focus-end .book-wrap {
    margin-left: 0;
    margin-right: 0;
  }
  .reader-stage {
    grid-template-columns: 1fr;
    min-height: 620px;
    padding-inline: 10px;
  }
  .arrow { display: none; }
  .bottom-toolbar { width: 94vw; overflow: auto; }
  .brand strong { font-size: 2.25rem; }
  .static-book { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { gap: 10px; padding: 14px; }
  .brand span { display: none; }
  .issue-data { font-size: .72rem; }
  .reader-stage { height: 72vh; min-height: 520px; }
  .static-book { grid-template-columns: 1fr; }
  .page-content { padding: 16px 16px; }
  .index-page h2,
  .editorial-page h2,
  .opener-page h2,
  .article-page h2,
  .authors-page h2 { font-size: 1.22rem; margin: .2rem 0 8px; }
  .theme-grid,
  .stat-row,
  .split-note,
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-grid p { min-height: auto; }
  .article-catalog { padding: 22px 18px; }
  .section-heading,
  .info-band { display: block; }
  .info-band { margin: 8px 18px 38px; }
  .info-band a { display: inline-block; margin-top: 18px; }
  .contact-modal__card { display: block; }
  .contact-modal__card a { display: inline-block; margin-top: 18px; }

  /* El lector (PageFlip) calcula el alto de cada página según el ancho disponible del celular,
     dando páginas más bajas que en PC. Se reduce la densidad del contenido del libro para que
     no se corte, sin afectar tablet/escritorio (fuera de este media query). */
  .longform-page .page-content { padding: 12px 14px; }
  .longform-page h2 { font-size: 1.05rem; line-height: 1.14; margin-bottom: 5px; }
  .longform-page p { font-size: .66rem; line-height: 1.2; margin: 0 0 4px; }
  .longform-page .quote-card { margin-top: 6px; padding: 6px; font-size: .68rem; }
  .longform-page .quote-card span { font-size: .6rem; }
  .author-portrait { width: 42px; height: 42px; margin: 0 0 4px 8px; border-width: 2px; }
  .article-layout h2 { font-size: 1.02rem; margin-bottom: 3px; }
  .article-layout .section { font-size: .56rem; }
  .article-layout p { font-size: .66rem; line-height: 1.2; }
  .byline { font-size: .6rem !important; }
  .finding { font-size: .64rem !important; padding-top: 4px; }
  .stat-row div,
  .split-note div,
  .table-card div { padding: 6px; }
  .stat-row { margin: 8px 0; }
  .stat-row strong { font-size: .9rem; }
  .stat-row span,
  .split-note span,
  .table-card span { font-size: .58rem; }
  .split-note,
  .table-card { margin: 8px 0; }
  .theme-grid { margin-top: 10px; gap: 6px; }
  .theme-grid div { min-height: auto; padding: 6px; }
  .theme-grid strong { margin: 2px 0 1px; font-size: .74rem; }
  .theme-grid small { line-height: 1.15; font-size: .68rem; }
  .lead { font-size: .74rem; margin-top: 4px; }
  .opener-page p,
  .authors-page p { font-size: .7rem; line-height: 1.25; }
  .toc li { padding: 3px 0; gap: 8px; }
  .toc b { font-size: .88rem; }
  .toc span { font-size: .58rem; line-height: 1.2; }
  .toc strong { font-size: .56rem; margin-bottom: 1px; }
  .line { margin-bottom: 6px; }
  .mini { font-size: .62rem; }
  .author-list { gap: 6px; margin-top: 8px; }
  .author-list p { padding: 7px; font-size: .68rem; }
  .credit-box { padding: 7px; margin-top: 8px; font-size: .68rem; }
  .movement-chart { gap: 6px; margin: 8px 0; }
  .movement-chart span { min-height: 22px; padding: 5px 8px; font-size: .62rem; }
  .download-link { padding: 6px 9px; font-size: .66rem; }

  /* Visor de artículo (PDF) en móvil: en vertical se ajusta al ancho completo disponible
     en vez de min(Npx, vw), evitando que el panel quede más angosto que la pantalla y
     recorte el documento. Este bloque es solo para #pdfModal; Noticias y Memoria HALO
     reciben el mismo tratamiento por separado más abajo. */
  #pdfModal { padding: 8px; }
  #pdfModal .pdf-modal__panel { width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 6px; overflow: auto; }
  #pdfModal .pdf-modal__bar { min-height: 52px; padding: 8px 12px; gap: 10px; }
  #pdfModal .pdf-modal__bar h2 { font-size: 1rem; }
  #pdfModal .pdf-modal__bar p { font-size: .58rem; }
  #pdfModal .pdf-modal__bar button { width: 34px; height: 34px; font-size: 1.5rem; }
  .pdf-modal iframe {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
  }

  /* Noticias y Memoria HALO comparten la misma base .pdf-modal que el visor de PDF,
     pero usaban el tamaño/padding de escritorio (min(94vw), header de 76px) también
     en celular, dejando el panel angosto y con el cierre muy pequeño. Mismo criterio
     que #pdfModal: panel a pantalla casi completa y encabezado compacto solo en móvil. */
  #newsModal,
  #memoryModal { padding: 8px; }
  #newsModal .pdf-modal__panel,
  #memoryModal .pdf-modal__panel {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    border-radius: 6px;
  }
  #newsModal .pdf-modal__bar,
  #memoryModal .pdf-modal__bar { min-height: 52px; padding: 8px 12px; gap: 10px; }
  #newsModal .pdf-modal__bar h2,
  #memoryModal .pdf-modal__bar h2 { font-size: 1rem; }
  #newsModal .pdf-modal__bar p,
  #memoryModal .pdf-modal__bar p { font-size: .58rem; }
  #newsModal .pdf-modal__bar button,
  #memoryModal .pdf-modal__bar button { width: 34px; height: 34px; font-size: 1.5rem; }
  .news-modal__content,
  .memory-modal__content { padding: 18px; }
  .memory-hero { padding: 18px; min-height: auto; }
  .memory-photo-slot { height: 110px; }
}

.modal-open {
  overflow: hidden;
}

.pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(1, 8, 18, .78);
  backdrop-filter: blur(10px);
}

.pdf-modal.open {
  display: flex;
}

.pdf-modal__panel {
  width: min(1180px, 96vw);
  height: min(860px, 92vh);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  background: #07182b;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}

.pdf-modal__bar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(8, 43, 76, .98), rgba(3, 15, 30, .98));
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.pdf-modal__bar p {
  margin: 0 0 4px;
  color: #9fc9e9;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  font-weight: 900;
}

.pdf-modal__bar h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.35rem;
  letter-spacing: 0;
}

.pdf-modal__bar button {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: white;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.pdf-modal iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: white;
}

.news-modal__panel {
  width: min(980px, 94vw);
  height: min(780px, 90vh);
  background:
    radial-gradient(circle at 88% 14%, rgba(73, 174, 217, .26), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #eaf4fb 100%);
}

.news-modal__content {
  color: var(--ink);
  overflow: auto;
  padding: 34px;
}

.news-kicker {
  margin: 0 0 10px;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 900;
}

.news-modal__content h3 {
  max-width: 720px;
  margin: 0 0 12px;
  font-family: Georgia, serif;
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--navy);
}

.news-modal__content > p:not(.news-kicker) {
  max-width: 760px;
  margin: 0 0 26px;
  color: #37556f;
  line-height: 1.65;
}

.news-feature {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 20px;
  align-items: start;
  margin: 0 0 18px;
  padding: 22px;
  border: 1px solid rgba(12, 55, 94, .16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(5, 46, 88, .96), rgba(8, 93, 147, .9)),
    #073761;
  color: white;
  box-shadow: 0 16px 38px rgba(9, 48, 84, .18);
}

.news-feature span {
  color: #9de9ff;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  font-weight: 900;
}

.news-feature h4 {
  margin: 0 0 8px;
  color: white;
  font-size: 1.2rem;
  letter-spacing: 0;
}

.news-feature p {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  line-height: 1.55;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.news-grid article {
  min-height: 184px;
  padding: 18px;
  border: 1px solid rgba(12, 55, 94, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 12px 30px rgba(10, 43, 74, .08);
}

.news-grid span {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .66rem;
  font-weight: 900;
}

.news-grid h4 {
  margin: 0 0 9px;
  color: var(--navy);
  font-size: 1.04rem;
  letter-spacing: 0;
}

.news-grid p {
  margin: 0;
  color: #496075;
  font-size: .9rem;
  line-height: 1.48;
}

.memory-modal__panel {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .8), transparent 20%),
    linear-gradient(180deg, #f7fbff 0%, #e6f2fa 100%);
}

.memory-hero {
  min-height: 210px;
  display: flex;
  align-items: end;
  margin: 0 0 18px;
  padding: 24px;
  border: 1px solid rgba(12, 55, 94, .16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(4, 30, 58, .2), rgba(4, 30, 58, .82)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 12px, rgba(255,255,255,.04) 12px 24px),
    linear-gradient(135deg, #1b78b4, #072d55);
  color: white;
  box-shadow: 0 18px 42px rgba(8, 48, 84, .18);
}

.memory-hero span,
.memory-grid span {
  display: block;
  color: #9de9ff;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .66rem;
  font-weight: 900;
}

.memory-hero h4 {
  max-width: 620px;
  margin: 8px 0 8px;
  color: white;
  font-size: 1.6rem;
  letter-spacing: 0;
}

.memory-hero p {
  max-width: 660px;
  margin: 0;
  color: rgba(255, 255, 255, .84);
  line-height: 1.55;
}

.memory-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.memory-grid article {
  min-height: 295px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid rgba(12, 55, 94, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 30px rgba(10, 43, 74, .08);
}

.memory-photo-slot {
  height: 136px;
  margin-bottom: 14px;
  border: 1px dashed rgba(6, 81, 142, .35);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(12, 109, 184, .08), rgba(255, 255, 255, .5)),
    linear-gradient(45deg, transparent 48%, rgba(8, 89, 151, .18) 49%, rgba(8, 89, 151, .18) 51%, transparent 52%);
}

.memory-grid h4 {
  margin: 9px 0 8px;
  color: var(--navy);
  font-size: 1.02rem;
  letter-spacing: 0;
}

.memory-grid p {
  margin: 0;
  color: #496075;
  font-size: .88rem;
  line-height: 1.45;
}

.contact-modal {
  padding: 22px;
  background: rgba(1, 8, 18, .92);
}

.contact-modal__panel {
  position: relative;
  width: min(760px, 92vw);
}

.contact-modal__panel > button {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(7, 24, 43, .96);
  color: white;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.contact-modal__card {
  display: block;
  margin: 0;
  padding: 30px;
  background:
    radial-gradient(circle at 86% 22%, rgba(157, 233, 255, .22), transparent 28%),
    linear-gradient(135deg, rgba(8, 43, 76, .98), rgba(4, 16, 31, .98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .42);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
}

.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.contact-form label {
  display: block;
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
}

.contact-form label span {
  display: block;
  margin-bottom: 8px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form input[type="file"] {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .08);
  color: white;
  font: inherit;
  font-size: .92rem;
  text-transform: none;
  letter-spacing: normal;
  outline: none;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(157, 233, 255, .6);
  box-shadow: 0 0 0 3px rgba(157, 233, 255, .14);
}

.contact-form button[type="submit"] {
  align-self: flex-start;
  border: 0;
  border-radius: 8px;
  padding: 12px 20px;
  background: var(--cyan);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 900;
  cursor: pointer;
}

.contact-form button[type="submit"]:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.contact-form__status {
  margin: 0;
  min-height: 1.2em;
  font-weight: 700;
  font-size: .88rem;
  color: rgba(255, 255, 255, .78);
}

.contact-form__status.is-success { color: #7be07f; }
.contact-form__status.is-error { color: #ff8a80; }

.search-modal__panel {
  height: min(820px, 90vh);
}

.search-box {
  display: block;
  margin-bottom: 14px;
}

.search-box span {
  display: block;
  margin-bottom: 10px;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 900;
}

.search-box input {
  width: 100%;
  border: 1px solid rgba(12, 55, 94, .18);
  border-radius: 8px;
  padding: 16px 18px;
  color: var(--ink);
  background: white;
  font: inherit;
  font-size: 1rem;
  outline: none;
  box-shadow: 0 12px 28px rgba(10, 43, 74, .08);
}

.search-box input:focus {
  border-color: rgba(0, 116, 189, .58);
  box-shadow: 0 0 0 3px rgba(0, 116, 189, .14);
}

.search-count {
  margin: 0 0 16px;
  color: #496075;
  font-weight: 800;
}

.search-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.search-result {
  padding: 18px;
  border: 1px solid rgba(12, 55, 94, .12);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 12px 30px rgba(10, 43, 74, .08);
}

.search-result span {
  display: block;
  margin-bottom: 10px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .64rem;
  font-weight: 900;
}

.search-result h4 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 1.08rem;
  letter-spacing: 0;
}

.search-result p {
  margin: 0 0 8px;
  color: #496075;
  font-size: .88rem;
  line-height: 1.42;
}

.search-result button {
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  padding: 10px 13px;
  background: var(--blue);
  color: white;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 900;
  cursor: pointer;
}

.search-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 22px;
  border: 1px dashed rgba(12, 55, 94, .22);
  border-radius: 8px;
  color: #496075;
  background: rgba(255, 255, 255, .65);
}

/* Los overrides responsivos de estas grillas deben ir despues de sus reglas base
   (arriba en este archivo): con la misma especificidad, si un @media aparece antes
   que la regla sin condicion, esta ultima gana el empate de cascada y el @media
   queda sin efecto sin importar el ancho de pantalla. Por eso viven aqui y no
   junto a los demas @media de mas arriba. */
@media (max-width: 1180px) {
  .news-grid,
  .memory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .news-feature,
  .news-grid,
  .memory-grid,
  .search-results { grid-template-columns: 1fr; }
}

.information-main {
  padding: 44px 46px 68px;
}

.info-hero {
  min-height: 270px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: 42px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background:
    radial-gradient(circle at 82% 18%, rgba(157, 233, 255, .26), transparent 32%),
    linear-gradient(135deg, rgba(8, 43, 76, .94), rgba(4, 16, 31, .94));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.info-hero p,
.eyebrow {
  margin: 0;
  color: #9fc9e9;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
  font-size: .74rem;
}

.info-hero h1 {
  margin: 10px 0 12px;
  font-family: Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  line-height: .98;
  letter-spacing: 0;
}

.info-hero span {
  display: block;
  color: #d8e8f5;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.info-hero a,
.document-card button {
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  color: white;
  padding: 12px 15px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .05em;
  white-space: nowrap;
}

.statute-panel {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  margin-top: 22px;
}

.statute-copy,
.statute-status,
.process-grid article,
.document-card {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

.statute-copy {
  padding: 30px;
}

.statute-copy h2,
.document-section h2 {
  margin: 8px 0 14px;
  font-family: Georgia, serif;
  font-size: 2rem;
  letter-spacing: 0;
}

.statute-copy p {
  max-width: 760px;
  color: #d8e8f5;
  line-height: 1.6;
}

.statute-status {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle, rgba(157, 233, 255, .18), transparent 58%),
    rgba(255, 255, 255, .07);
}

.statute-status strong {
  display: block;
  color: var(--cyan);
  font-size: 2.1rem;
  font-family: Georgia, serif;
  font-weight: 400;
}

.statute-status span {
  margin-top: 10px;
  color: #d8e8f5;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 900;
}

.statute-status a {
  margin-top: 22px;
  border: 1px solid rgba(157, 233, 255, .52);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  color: white;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.process-grid article {
  padding: 22px;
}

.process-grid span {
  color: var(--cyan);
  font-family: Georgia, serif;
  font-size: 2rem;
}

.process-grid h3,
.document-card h3 {
  margin: 10px 0 8px;
  font-family: Georgia, serif;
  letter-spacing: 0;
}

.process-grid p,
.document-card p {
  color: #d8e8f5;
  line-height: 1.5;
}

.document-section {
  margin-top: 34px;
}

.template-panel {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px;
  margin-bottom: 28px;
}

.template-panel > div {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
}

.template-panel > div:first-child {
  padding: 30px;
}

.template-panel h2 {
  margin: 8px 0 14px;
  font-family: Georgia, serif;
  font-size: 2rem;
  letter-spacing: 0;
}

.template-panel p:not(.eyebrow) {
  max-width: 760px;
  color: #d8e8f5;
  line-height: 1.6;
}

.template-download {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 220px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(circle, rgba(157, 233, 255, .2), transparent 58%),
    rgba(255, 255, 255, .09);
}

.template-download strong {
  display: block;
  color: var(--cyan);
  font-size: 2.1rem;
  font-family: Georgia, serif;
  font-weight: 400;
}

.template-download span {
  margin-top: 10px;
  color: #d8e8f5;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  font-weight: 900;
}

.template-actions {
  width: 100%;
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.template-actions a {
  margin-top: 22px;
  border: 1px solid rgba(157, 233, 255, .52);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  color: white;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.template-actions a {
  margin-top: 0;
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.document-card {
  display: flex;
  flex-direction: column;
  min-height: 315px;
  padding: 22px;
}

.doc-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(157, 233, 255, .46);
  border-radius: 50%;
  color: var(--cyan);
  font-size: 1.4rem;
}

.document-card a,
.document-card button {
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  color: white;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .05em;
}

.document-card button {
  color: #a9cce5;
  cursor: not-allowed;
  opacity: .82;
}

@media (max-width: 1180px) {
  .statute-panel,
  .template-panel { grid-template-columns: 1fr; }
  .document-grid,
  .process-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .information-main { padding: 22px 18px 44px; }
  .info-hero {
    display: block;
    min-height: 240px;
    padding: 28px;
  }
  .info-hero a { display: inline-block; margin-top: 24px; white-space: normal; }
  .document-card button { white-space: normal; }
  .process-grid,
  .document-grid { grid-template-columns: 1fr; }
}