.codex-page {
  --codex-pink: var(--hd-pink-text, #d62a78);
  --codex-gold: var(--hd-gold, #d7ae75);
  --codex-dark: var(--hd-ink, #10232b);
  --codex-paper: var(--hd-paper, #f2f4f4);
  /* Códice forma parte del mismo sistema visual de Conoce / Demo 2.0. */
  --pink-text-accessible: var(--hd-pink-text, #d62a78);
  --muertos-gold: var(--hd-gold, #d7ae75);
  --night-dark: var(--hd-ink, #10232b);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  color: var(--ink);
  font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.codex-page,
.codex-page * {
  box-sizing: border-box;
}

.codex-page :is(section, aside, article, div, figure, ol, li) {
  min-width: 0;
  max-width: 100%;
}

.codex-page :is(h1, h2, h3, p, strong, small, span, summary) {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Jerarquía editorial compartida con el resto de Huamantla Disfruta. */
.codex-page .microtitle,
.codex-page .hd-celebration-microtitle {
  margin: 0;
  color: var(--codex-pink) !important;
  font-size: max(.75rem, 12px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.codex-page .hd-celebration-hero h1 {
  color: var(--ink) !important;
  font-family: inherit;
  font-size: clamp(2.45rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.052em;
}

.codex-page .hd-celebration-section-heading h2 {
  max-width: 18ch;
  margin: 6px 0 0;
  color: var(--ink) !important;
  font-family: inherit;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.045em;
}

.codex-page .hd-celebration-section-heading > p {
  color: var(--secondary);
  font-size: .82rem;
  line-height: 1.65;
}

.codex-page h3 {
  color: var(--ink);
  font-family: inherit;
  font-weight: 800;
  letter-spacing: -.02em;
}

.codex-page section,
.codex-page aside {
  scroll-margin-top: 100px;
}

.codex-hero .hero-image img {
  object-position: center;
}

.codex-introduction,
.codex-definition,
.codex-route,
.codex-fragments,
.codex-materials,
.codex-conservation,
.codex-center,
.codex-importance,
.codex-visit,
.codex-faq,
.codex-source {
  width: min(calc(100% - 48px), 1180px);
  margin-top: 48px;
  margin-right: auto;
  margin-left: auto;
}

.codex-introduction {
  display: grid;
  grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 34px;
  padding: 34px;
  border-radius: 30px;
  background: var(--codex-dark);
}

.codex-introduction figure {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
}

.codex-introduction img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px !important;
}

.codex-page .codex-introduction .microtitle {
  color: var(--codex-gold) !important;
}

.codex-introduction h2 {
  margin: 8px 0 0;
  color: #fff !important;
  font-size: clamp(2rem, 4vw, 3.35rem) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -.05em !important;
}

.codex-introduction p:not(.microtitle) {
  max-width: 66ch;
  margin: 16px 0 0;
  color: #d5dde0 !important;
  font-size: 1rem;
  line-height: 1.7;
}

.codex-definition,
.codex-route,
.codex-materials,
.codex-importance,
.codex-visit,
.codex-faq {
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
}

.codex-definition-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.codex-definition-grid article {
  min-height: 185px;
  padding: 20px;
  border-radius: 20px;
  background: var(--codex-paper);
}

.codex-definition-grid span,
.codex-importance-grid span {
  color: var(--secondary);
  font-size: .72rem;
  font-weight: 900;
}

.codex-definition-grid h3 {
  margin: 28px 0 0;
  font-size: 1.08rem;
  line-height: 1.25;
}

.codex-definition-grid p,
.codex-importance-grid p,
.codex-visit-grid p,
.codex-fragment-cards p,
.codex-conservation-grid p {
  margin: 10px 0 0;
  color: var(--secondary);
  font-size: max(.875rem, 14px);
  line-height: 1.55;
}

.codex-route {
  background: var(--codex-paper);
}

.codex-route-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 26px 0 0;
  list-style: none;
}

.codex-route-list li {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.codex-route-list > li > span {
  display: grid;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--codex-dark);
  font-size: .75rem;
  font-weight: 900;
}

.codex-route-list h3 {
  margin: 0;
  font-size: 1rem;
}

.codex-route-list p {
  max-width: 100ch;
  margin: 8px 0 0;
  color: var(--secondary);
  font-size: max(.875rem, 14px);
  line-height: 1.6;
}

.codex-fragments {
  display: grid;
  grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
  gap: 28px;
  align-items: center;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
}

.codex-fragments h2,
.codex-conservation h2,
.codex-center h2,
.codex-visit h2,
.codex-source h2 {
  margin: 8px 0 0;
  color: var(--ink) !important;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.045em;
}

.codex-fragments > div:first-child > p:not(.microtitle),
.codex-conservation > div:first-child > p:not(.microtitle),
.codex-center p:not(.microtitle),
.codex-visit > div:first-child > p:not(.microtitle),
.codex-source p:not(.microtitle) {
  max-width: 66ch;
  margin: 16px 0 0;
  color: var(--secondary);
  font-size: .9rem;
  line-height: 1.65;
}

.codex-fragment-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.codex-fragment-cards article {
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--codex-paper);
}

.codex-fragment-cards strong {
  display: block;
  color: var(--codex-pink);
  font-size: 1.75rem;
}

.codex-fragment-cards span {
  display: block;
  margin-top: 18px;
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.35;
}

.codex-material-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 26px;
}

.codex-material-grid article {
  min-height: 170px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--codex-paper);
}

.pigment {
  display: block;
  width: 42px;
  height: 10px;
  border: 1px solid rgba(12, 37, 45, .25);
  border-radius: 999px;
  background: var(--hd-codex-pigment, var(--hd-codex-pigment-fallback, #187b92));
}

.pigment--blue { --hd-codex-pigment-fallback: #187b92; }
.pigment--red { --hd-codex-pigment-fallback: #a6253d; }
.pigment--black { --hd-codex-pigment-fallback: #1a2023; }
.pigment--ochre { --hd-codex-pigment-fallback: #a56821; }

.codex-material-grid h3 {
  margin: 34px 0 0;
  font-size: .98rem;
}

.codex-material-grid p {
  margin: 8px 0 0;
  color: var(--secondary);
  font-size: max(.875rem, 14px);
  line-height: 1.5;
}

.codex-material-note {
  padding: 16px 18px;
  margin-top: 10px;
  border-left: 4px solid var(--secondary);
  border-radius: 10px;
  background: #fff;
}

.codex-material-note p {
  margin: 0;
  color: var(--secondary);
  font-size: max(.875rem, 14px);
  line-height: 1.6;
}

.codex-conservation {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 28px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--codex-paper);
}

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

.codex-conservation-grid article {
  min-height: 145px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.codex-conservation-grid span {
  font-size: .83rem;
  font-weight: 900;
}

.codex-conservation-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  color: var(--secondary);
  background: #fff;
  font-size: max(.875rem, 14px);
  line-height: 1.55;
}

.codex-center {
  padding: 44px;
  border-radius: 30px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(16,35,43,.98), rgba(16,35,43,.86)),
    url("../images/codice-huamantla/hero.webp") center / cover;
}

.codex-page .codex-center .microtitle {
  color: var(--codex-gold) !important;
}

.codex-center h2 {
  max-width: 16ch;
  color: #fff !important;
  font-size: clamp(1.85rem, 3.5vw, 2.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

.codex-center p:not(.microtitle) {
  max-width: 72ch;
  color: #d5dde0 !important;
}

.codex-page :is(
  .codex-definition-grid h3,
  .codex-route-list h3,
  .codex-fragment-cards h3,
  .codex-material-grid h3,
  .codex-conservation-grid h3,
  .codex-importance-grid h3,
  .codex-visit-grid h3
) {
  color: var(--ink) !important;
}

.codex-page .codex-fragment-cards strong,
.codex-page .codex-visit-grid small {
  color: var(--codex-pink) !important;
}

.codex-importance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 26px;
}

.codex-importance-grid article {
  min-height: 135px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--codex-paper);
}

.codex-visit {
  display: grid;
  grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
  gap: 28px;
}

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

.codex-visit-grid article {
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--codex-paper);
}

.codex-visit-grid small {
  color: var(--codex-pink);
  font-size: max(.75rem, 12px);
  font-weight: 900;
  text-transform: uppercase;
}

.codex-visit-grid h3 {
  margin: 30px 0 0;
  font-size: .96rem;
  line-height: 1.35;
}

.codex-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 26px;
}

.codex-faq details {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--codex-paper);
}

.codex-faq summary {
  min-height: 82px;
  padding: 18px 42px 18px 18px;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 850;
  line-height: 1.4;
}

.codex-faq details p {
  padding: 0 18px 18px;
  margin: 0;
  color: var(--secondary);
  font-size: max(.875rem, 14px);
  line-height: 1.55;
}

.codex-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 34px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--codex-paper);
}

.codex-source h2 {
  color: var(--ink) !important;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.codex-source .fair-button {
  flex: 0 0 auto;
}


/* 5.0.14 — normalización visual de tarjetas y texto editorial. */
.codex-page :is(
  .codex-definition-grid h3,
  .codex-route-list h3,
  .codex-fragment-cards h3,
  .codex-material-grid h3,
  .codex-conservation-grid h3,
  .codex-importance-grid h3,
  .codex-visit-grid h3
) {
  color: var(--ink) !important;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
}

.codex-page :is(
  .codex-definition-grid p,
  .codex-route-list p,
  .codex-fragment-cards p,
  .codex-material-grid p,
  .codex-conservation-grid p,
  .codex-importance-grid p,
  .codex-visit-grid p,
  .codex-material-note p
) {
  color: var(--secondary);
  font-size: max(.875rem, 14px);
  font-weight: 400;
  line-height: 1.6;
}

.codex-page .codex-fragment-cards strong {
  color: var(--codex-pink) !important;
  font-weight: 800;
  letter-spacing: -.03em;
}

.codex-page .codex-visit-grid small {
  color: var(--codex-pink) !important;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.3;
}

.codex-page .codex-conservation-grid > article > span {
  color: var(--codex-pink);
  font-size: max(.75rem, 12px);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.codex-page .codex-route-list > li > span {
  background: var(--codex-dark);
  color: #fff;
}

.codex-page .codex-source .hd-celebration-button--primary {
  background: var(--codex-dark);
  border-color: var(--codex-dark);
  color: #fff !important;
}

.codex-page .codex-source .hd-celebration-button--primary:hover,
.codex-page .codex-source .hd-celebration-button--primary:focus-visible {
  background: #18343e;
  border-color: #18343e;
  color: #fff !important;
}

@media (max-width: 1024px) {
  .codex-introduction,
  .codex-fragments,
  .codex-conservation,
  .codex-visit {
    grid-template-columns: 1fr;
  }

  .codex-definition-grid,
  .codex-fragment-cards,
  .codex-conservation-grid,
  .codex-visit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .codex-material-grid,
  .codex-importance-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .codex-introduction,
  .codex-definition,
  .codex-route,
  .codex-fragments,
  .codex-materials,
  .codex-conservation,
  .codex-center,
  .codex-importance,
  .codex-visit,
  .codex-faq,
  .codex-source {
    width: min(calc(100% - 28px), 1180px);
    margin-top: 24px;
    padding: 18px;
    border-radius: 22px;
  }

  .codex-introduction {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .codex-definition-grid,
  .codex-fragment-cards,
  .codex-material-grid,
  .codex-conservation-grid,
  .codex-importance-grid,
  .codex-visit-grid,
  .codex-faq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .codex-definition-grid article,
  .codex-fragment-cards article,
  .codex-material-grid article,
  .codex-conservation-grid article,
  .codex-importance-grid article,
  .codex-visit-grid article {
    min-height: 0;
    padding: 14px;
  }

  .codex-definition-grid h3,
  .codex-material-grid h3,
  .codex-visit-grid h3 {
    margin-top: 18px;
  }

  .codex-route-list li {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  .codex-route-list > li > span {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
  }

  .codex-center {
    background:
      linear-gradient(rgba(16,35,43,.96), rgba(16,35,43,.92)),
      url("../images/codice-huamantla/hero.webp") center / cover;
  }

  .codex-faq-grid details:last-child {
    grid-column: 1 / -1;
  }

  .codex-source {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .codex-page .hd-celebration-section-heading {
    display: grid;
    align-items: start;
    gap: 12px;
  }

  .codex-page .hd-celebration-section-heading h2,
  .codex-fragments h2,
  .codex-conservation h2,
  .codex-center h2,
  .codex-visit h2 {
    font-size: clamp(1.8rem, 9vw, 2.4rem) !important;
  }

  .codex-introduction h2 {
    font-size: clamp(1.9rem, 10vw, 2.55rem) !important;
  }
}