/* ==========================================================================
   components.css — navbar, píldora, botones, titulares, greca, footer,
   fórmulas, panel de cookies y formularios.
   Las medidas verticales/horizontales son las del PNG; ver docs/measurements.
   ========================================================================== */

/* ---------- 1. Navbar ---------------------------------------------------- */
.nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: calc(26 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(19 * var(--u));
  letter-spacing: 0.01em;
  color: var(--paper);
  text-decoration: none;
  padding: calc(8 * var(--u)) calc(4 * var(--u));
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.nav__link:hover { color: var(--lime); }

.nav__link[aria-current="page"] {
  color: var(--lime);
  border-bottom-color: var(--lime);
}

/* Elemento desactivado: Servicios no se publica (D3) */
.nav__link[aria-disabled="true"] {
  color: #767676;               /* 4,54:1 sobre blanco (AA); #828282 daba 3,84 */
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.nav__toggle {
  display: none;
  position: absolute;
  right: calc(16 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  min-width: 48px; min-height: 48px;
  background: transparent;
  border: 1px solid var(--paper);
  color: var(--paper);
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: calc(22 * var(--u));
  height: 2px;
  margin: 3px auto;
  background: currentColor;
}

/* ---------- 2. Hero ------------------------------------------------------ */
/* La fotografía del diseño se usa tal cual (recorte del PNG de referencia):
   nada de filtros que la desvíen del original. */
.hero__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

.hero__title {
  font-family: "Display Heavy", var(--font-display);
  font-weight: 400;
  font-size: calc(323 * var(--u));
  line-height: 0.86;
  letter-spacing: 0;
  -webkit-text-stroke: calc(5 * var(--u)) currentColor;
  transform: scaleX(0.596);
  transform-origin: left top;
  text-transform: uppercase;
  color: var(--lime);
  white-space: nowrap;
  /* el PNG muestra un perfilado violeta en el corte de las letras */
  text-shadow:
    calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--violet),
    calc(6 * var(--u)) calc(6 * var(--u)) calc(14 * var(--u)) rgba(94, 23, 235, 0.35);
}

/* ---------- 3. Píldora --------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--violet);
  color: var(--lime);
  align-items: flex-end;
  padding-bottom: calc(12 * var(--u));
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--fs-pill) * var(--u));
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  width: calc(629 * var(--u));
  height: calc(120 * var(--u));
  padding: 0 calc(24 * var(--u));
}

.pill--dark {
  background: var(--ink);
  color: var(--cyan);
  border: 1px solid var(--cyan);
}

/* ---------- 4. Botones --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(26 * var(--u));
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-box);
  padding: calc(14 * var(--u)) calc(30 * var(--u));
  min-height: 48px;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.btn:hover { background: var(--lime); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--paper);
}
.btn--ink:hover { background: var(--violet); color: var(--paper); }

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.btn--ghost:hover { background: var(--paper); color: var(--ink); }

.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- 5. Titulares ------------------------------------------------- */
.h1, .h2, .h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: var(--ls, -0.01em);
  line-height: 0.9;
}

.h2 { font-size: calc(var(--fs-h2) * var(--u)); color: var(--lime); white-space: nowrap; -webkit-text-stroke: calc(2.2 * var(--u)) currentColor; }
.h2--alt { font-size: calc(82 * var(--u)); }
.h3 {
  font-size: calc(var(--fs-h3) * var(--u));
  text-transform: uppercase;
  letter-spacing: var(--ls, 0.09em);
  white-space: nowrap;
  color: var(--lime);
}

/* Rótulo pequeño en versalitas que precede a un titular */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(22 * var(--u));
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--paper);
  margin-bottom: calc(8 * var(--u));
}

/* ---------- 6. Cintillo -------------------------------------------------- */
/* Medido del PNG: la banda entera (127 px) es una trama de semitono —puntos
   grises de 21 px de paso con ~47 % de cobertura sobre negro— y el lema va en
   lima encima, en una sola línea de 1309 px de ancho (x 31–1340, y 797–859). */
.cintillo {
  position: absolute;
  inset: 0;
  background: var(--ink) url("/assets/img/design/cintillo-banda.webp") 0 0 / 100% 100% no-repeat;
  overflow: hidden;
}

.cintillo__trama { display: none; }

.cintillo__text {
  position: absolute;
  left: calc(31 * var(--u));
  top: calc(29 * var(--u));
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--fs-cintillo) * var(--u));
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--lime);
  white-space: nowrap;
  transform-origin: left top;
}

/* ---------- 7. Palabra rotada -------------------------------------------- */
.rotated {
  -webkit-text-stroke: calc(1.4 * var(--u)) currentColor;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(77 * var(--u));
  letter-spacing: 0.02em;
  color: var(--blue);
  white-space: nowrap;
}

/* ---------- 8. Párrafos -------------------------------------------------- */
.lead {
  font-size: calc(var(--fs-lead) * var(--u));
  line-height: 1.5;
  color: var(--paper);
  margin: 0;
}

.body-text {
  font-size: calc(var(--fs-body) * var(--u));
  line-height: var(--lh-body);
  color: var(--paper);
  margin: 0 0 calc(18 * var(--u));
}

.body-text--dark { color: var(--ink); }

/* ---------- 9. Piezas de obra (imágenes) --------------------------------- */
/* Placas dibujadas (Stonehenge): se muestran completas, sin recorte */
.work--plate { object-fit: contain; background: var(--paper); }

.work {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--gray-900);
}

.work-frame {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.work-caption {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(61.11 * var(--u));
  letter-spacing: 0;
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
  white-space: nowrap;
  transform: scaleX(0.585);
  transform-origin: left top;
}

/* ---------- 10. Cifras --------------------------------------------------- */
.figure {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(76 * var(--u));
  line-height: 0.85;
  color: var(--lime);
  margin: 0;
}

.figure--muted { color: var(--paper); }

/* ---------- 11. Greca + CTA ---------------------------------------------- */
.greca-frame {
  position: absolute;
  display: grid;
  place-items: center;
}

.greca-frame .greca {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- 12. Fórmulas (artículo) -------------------------------------- */
.formula {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(var(--fs-mono) * var(--u));
  color: var(--magenta-ink);   /* AA sobre fondo claro */
  background: var(--gray-100);
  border-left: calc(4 * var(--u)) solid var(--magenta);
  padding: calc(12 * var(--u)) calc(18 * var(--u));
  margin: calc(20 * var(--u)) 0;
  overflow-x: auto;
}

.formula em { font-style: normal; color: var(--ink); }

/* ---------- 13. Footer --------------------------------------------------- */
/* Réplica medida de "Menu Footer.png" (1366×444): zona blanca 0–352 y franja
   oscura 352–444. Todas las coordenadas son las del PNG, en px de diseño. */
.footer {
  position: relative;
  height: calc(444 * var(--u));
  background: var(--paper);
  color: #111;
  overflow: hidden;
}

.footer a { color: inherit; }

.footer__left {
  position: absolute;
  left: calc(32 * var(--u));
  top: calc(84 * var(--u));
  width: calc(560 * var(--u));
}

.footer__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(18 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 calc(28 * var(--u));
  color: #111;
}

.footer__note {
  font-size: calc(15 * var(--u));
  line-height: calc(26 * var(--u));
  margin: 0 0 calc(34 * var(--u));
  color: #242424;
  max-width: calc(560 * var(--u));
}

.footer__legal {
  display: inline-block;
  font-size: calc(15 * var(--u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid #111;
  padding-bottom: 2px;
}

.footer__form {
  position: absolute;
  left: calc(19 * var(--u));
  top: calc(262 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(90 * var(--u));
  margin: 0;
}

.footer__form input {
  width: calc(284 * var(--u));
  height: calc(63 * var(--u));
  border: 0;
  border-radius: 0;
  background: var(--lime);
  color: #111;
  padding: 0 calc(49 * var(--u));
  font-family: var(--font-body);
  font-size: calc(13 * var(--u));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer__form input::placeholder { color: #111; opacity: 1; }

.footer__form button {
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(13 * var(--u));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #111;
  cursor: pointer;
}

.footer__form button:hover { border-bottom: 1px solid #111; }

.footer__form .form-status { position: absolute; left: 0; top: calc(70 * var(--u)); }

.footer__right {
  position: absolute;
  left: calc(877 * var(--u));
  top: calc(31 * var(--u));
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(22 * var(--u));
  font-size: calc(15 * var(--u));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer__links a { text-decoration: none; }
.footer__links a:hover { border-bottom: 1px solid #111; }

.footer__contact {
  margin: calc(41 * var(--u)) 0 0;
  font-size: calc(15 * var(--u));
  letter-spacing: 0.02em;
}

.footer__contact a { text-decoration: none; }
.footer__contact a:hover { border-bottom: 1px solid #111; }

.footer__social {
  position: absolute;
  left: calc(696 * var(--u));
  top: calc(238 * var(--u));
  display: flex;
  align-items: flex-start;
}

.footer__social > div:nth-child(1) { width: calc(128 * var(--u)); }
.footer__social > div:nth-child(2) { width: calc(106 * var(--u)); margin-left: calc(71 * var(--u)); }
.footer__social > div:nth-child(3) { width: calc(171 * var(--u)); margin-left: calc(54 * var(--u)); }

.footer__social h3 {
  font-size: calc(13 * var(--u));
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 calc(30 * var(--u));
  color: #242424;
}

.footer__social a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(26 * var(--u));
  text-decoration: none;
  color: #111;
  line-height: 1;
}

.footer__strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(92 * var(--u));
  background: #202020;
  color: var(--lime);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(9 * var(--u));
  text-align: center;
}

.footer .cookies { position: relative; }
.footer .cookies summary { cursor: pointer; list-style: none; text-transform: uppercase; }
.footer .cookies summary::-webkit-details-marker { display: none; }
.footer .cookies summary:hover { border-bottom: 1px solid #111; }
.footer .cookies__body {
  position: absolute; top: calc(28 * var(--u)); left: 0;
  width: calc(430 * var(--u)); background: #fff; color: #111;
  border: 1px solid #111; padding: calc(16 * var(--u)); z-index: 30;
}

.footer__strip p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(13 * var(--u));
  letter-spacing: 0.30em;
  text-transform: uppercase;
}

/* ---------- 14. Formularios ---------------------------------------------- */
.field { display: grid; gap: calc(6 * var(--u)); margin-bottom: calc(14 * var(--u)); }

.field label {
  font-size: calc(var(--fs-micro) * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-700);
}

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: calc(var(--fs-small) * var(--u));
  color: var(--ink);
  background: var(--paper);
  border: var(--border-w) solid var(--ink);
  border-radius: var(--radius-box);
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  min-height: 48px;
  width: 100%;
}

.subscribe {
  display: flex;
  gap: calc(10 * var(--u));
  align-items: stretch;
  flex-wrap: wrap;
}

.subscribe input {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--font-body);
  font-size: calc(var(--fs-small) * var(--u));
  color: var(--ink);
  background: var(--lime);
  border: var(--border-w) solid var(--ink);
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  min-height: 48px;
}

.subscribe input::placeholder { color: var(--ink); opacity: 0.75; }

.subscribe .btn { font-size: calc(20 * var(--u)); }

.form-status {
  font-size: calc(var(--fs-small) * var(--u));
  margin: calc(8 * var(--u)) 0 0;
  min-height: 1.4em;
  color: var(--ink);
}

.form-status[data-state="error"] { color: #b00020; }
.form-status[data-state="ok"] { color: #1b5e20; }

/* ---------- 15. Panel de cookies ---------------------------------------- */
.cookies {
  border-top: 1px solid var(--gray-300);
  padding: calc(20 * var(--u)) calc(33 * var(--u));
  background: var(--gray-100);
}

.cookies summary {
  cursor: pointer;
  font-size: calc(var(--fs-small) * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.cookies__body { padding-top: calc(12 * var(--u)); }

.cookies__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  padding: calc(10 * var(--u)) 0;
  border-bottom: 1px solid var(--gray-300);
}

/* ---------- 16. Modo flujo ---------------------------------------------- */
@media (max-width: 1023px) {
  .nav { position: static; height: auto; padding: 12px 0; }
  .nav__list { gap: 18px; flex-wrap: wrap; justify-content: flex-start; }
  .nav__link { font-size: 15px; }
  .nav__toggle { display: none; }

  .hero__portrait { position: relative; height: 62vh; }
  .hero__title { font-size: clamp(56px, 17vw, 132px); white-space: normal; }
  .pill { font-size: 14px; padding: 10px 18px; }
  .cintillo__text { white-space: normal; font-size: 20px; text-align: center; }
  .rotated { writing-mode: horizontal-tb; transform: none; font-size: 40px; }
  .figure { font-size: 64px; }
  .btn { font-size: 16px; padding: 12px 18px; }
  .footer__top { grid-template-columns: 1fr; padding: 28px 20px; }
  .footer__strip p { font-size: 16px; }
  .work-frame { position: static; width: 100%; height: auto; margin-bottom: 16px; }
  .greca-frame { position: static; }
}

/* ---------- 17. Páginas interiores y texto largo ------------------------- */
.legal, .page { background: var(--paper); color: var(--ink); }

.crumbs {
  font-size: calc(var(--fs-micro) * var(--u));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-700);
  margin-bottom: calc(24 * var(--u));
}
.crumbs a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }

.prose {
  max-width: 68ch;
  font-size: calc(19 * var(--u));
  line-height: 1.62;
  color: var(--ink);
}
.prose h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(72 * var(--u));
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 calc(24 * var(--u));
}
.prose h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(22 * var(--u));
  letter-spacing: 0.01em;
  margin: calc(34 * var(--u)) 0 calc(10 * var(--u));
  padding-top: calc(10 * var(--u));
  border-top: 1px solid var(--gray-300);
}
.prose p { margin: 0 0 calc(14 * var(--u)); }
.prose .li { padding-left: calc(18 * var(--u)); position: relative; }
.prose .li::before { content: "—"; position: absolute; left: 0; color: var(--gray-500); }

@media (max-width: 1023px) {
  .prose { font-size: 17px; }
  .prose h1 { font-size: 40px; }
  .prose h2 { font-size: 19px; }
}

/* ---------- 18. Retícula de obras --------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: calc(28 * var(--u));
  margin: calc(28 * var(--u)) 0 calc(56 * var(--u));
  padding: 0;
  list-style: none;
}
.card { display: grid; gap: calc(10 * var(--u)); }
.card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gray-900);
  border: 1px solid var(--gray-300);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(30 * var(--u));
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.card p { margin: 0; font-size: calc(var(--fs-small) * var(--u)); color: var(--gray-700); }

.anchor-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(54 * var(--u));
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: calc(16 * var(--u)) 0 0;
  color: var(--ink);
  scroll-margin-top: calc(80 * var(--u));
}

/* ---------- 19. Utilidades de página ------------------------------------ */
.notfound, .sitemap-tree { padding-left: calc(20 * var(--u)); }
.notfound li, .sitemap-tree li { margin-bottom: calc(8 * var(--u)); }
.sitemap-tree ul { margin-top: calc(8 * var(--u)); }
@media (max-width: 1023px) { .cards { grid-template-columns: 1fr; } }

/* Ítems sin destino: se presentan como texto, nunca como enlace roto */
span.nav__link { display: inline-block; }
.footer__disabled {
  font-size: calc(var(--fs-small) * var(--u));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #767676;
  text-decoration: line-through;
}

/* ---------- 20. Artículo largo ------------------------------------------ */
.art { max-width: calc(1166 * var(--u)); }   /* columna medida del artículo, no 66ch */
.art h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(44 * var(--u));
  letter-spacing: 0.02em;
  text-transform: none;
  border-top: 0;
  padding-top: 0;
  margin: calc(48 * var(--u)) 0 calc(16 * var(--u));
}
.art-byline {
  font-size: calc(var(--fs-micro) * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-700);
  margin-bottom: calc(32 * var(--u));
}
.art-figure { margin: calc(34 * var(--u)) 0 calc(40 * var(--u)); }
.art-media {
  display: block;
  width: 100%;
  min-height: calc(420 * var(--u));
  height: auto;
  border: 1px solid var(--gray-300);
  background: var(--paper);
}
.art-figure figcaption {
  font-size: calc(var(--fs-small) * var(--u));
  line-height: 1.45;
  color: var(--gray-700);
  margin-top: calc(8 * var(--u));
  max-width: 60ch;
}
.art-pending {
  display: grid;
  place-items: center;
  min-height: calc(220 * var(--u));
  padding: calc(24 * var(--u));
  border: 1px dashed var(--gray-500);
  color: var(--gray-700);
  font-size: calc(var(--fs-small) * var(--u));
  text-align: center;
}
.art-label {
  font-family: var(--font-mono);
  font-size: calc(var(--fs-micro) * var(--u));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-700);
  margin: calc(12 * var(--u)) 0;
}
.art-next {
  font-family: var(--font-display);
  font-size: calc(34 * var(--u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid var(--gray-300);
  padding-top: calc(20 * var(--u));
  margin-top: calc(48 * var(--u));
}
.art-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(var(--fs-small) * var(--u));
  margin: calc(24 * var(--u)) 0 calc(32 * var(--u));
}
.art-table caption {
  text-align: left;
  font-size: calc(var(--fs-micro) * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-700);
  padding-bottom: calc(8 * var(--u));
}
.art-table th, .art-table td {
  border-bottom: 1px solid var(--gray-300);
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.art-table th { font-weight: 500; background: var(--gray-100); }
@media (max-width: 1023px) {
  .art h2 { font-size: 30px; }
  .art-next { font-size: 24px; }
}

/* ---------- 21. Diálogo con hablantes ----------------------------------- */
.art-lede {
  font-size: calc(23 * var(--u));
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 calc(28 * var(--u));
  padding-bottom: calc(24 * var(--u));
  border-bottom: 1px solid var(--gray-300);
}
.speaker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: calc(13 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  margin: calc(26 * var(--u)) 0 calc(8 * var(--u));
}
@media (max-width: 1023px) {
  .art-lede { font-size: 17px; }
  .speaker { font-size: 11px; }
}

/* Página de diálogo: cuerpo medido del PNG (interlínea de 22 px → 15/1,47) */
.art--dense { font-size: calc(15 * var(--u)); line-height: 1.47; }
.art--dense p { margin: 0 0 calc(11 * var(--u)); }
.art--dense h2 { font-size: calc(34 * var(--u)); margin: calc(36 * var(--u)) 0 calc(10 * var(--u)); }
.art--dense h1 { font-size: calc(56 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.art--dense .art-byline { margin-bottom: calc(18 * var(--u)); }
.art--dense .art-lede { font-size: calc(17 * var(--u)); line-height: 1.5; margin-bottom: calc(18 * var(--u)); padding-bottom: calc(16 * var(--u)); }
.art--dense .speaker { margin: calc(18 * var(--u)) 0 calc(5 * var(--u)); }
.art--dense .art-pending { min-height: calc(140 * var(--u)); }
@media (max-width: 1023px) {
  .art--dense { font-size: 16px; }
  .art--dense h2 { font-size: 26px; }
  .art--dense h1 { font-size: 36px; }
}

/* ---------- 22. Piezas verificadas contra el PNG (banda 3, 5 y 7) ------ */
/* Trama de semitono tras los titulares: el PNG la tiene (41–56 % de gris medio) */
.halftone-band {
  position: absolute;
  top: calc(var(--y, 0) * var(--u));
  left: calc(var(--x, 0) * var(--u));
  width: calc(var(--xw, 100) * var(--u));
  height: calc(var(--h, 100) * var(--u));
  background-image: radial-gradient(circle at center, currentColor 1.55px, transparent 1.75px);
  background-size: calc(4.4 * var(--u)) calc(4.4 * var(--u));
  color: #c8c8c8;
  opacity: 0.76;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  pointer-events: none;
}

/* «INTELIGENCIA + AMOR»: texto azul, no píldora (medido: #5090F0 sobre negro) */
.arm-tag {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(38 * var(--u));
  line-height: 1;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}

/* Marcos de líneas diagonales a 45°/135° en esquinas opuestas (§4.3) */
.diagonals {
  position: absolute;
  width: calc(260 * var(--u));
  height: calc(190 * var(--u));
  background-image: repeating-linear-gradient(45deg, #e8e8e8 0 1px, transparent 1px calc(12 * var(--u)));
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  pointer-events: none;
}
.diagonals--tl { top: 0; left: 0; /* medido: 3,5 % de blanco en la esquina superior izquierda */ }
.diagonals--br {
  right: 0; bottom: 0;
  background-image: repeating-linear-gradient(135deg, #e8e8e8 0 1px, transparent 1px calc(12 * var(--u)));
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(315deg, #000, transparent 78%); mask-image: linear-gradient(315deg, #000, transparent 78%);
}

@media (max-width: 1023px) {
  .arm-tag { font-size: 22px; }
  .diagonals { width: 120px; height: 90px; }
  .halftone-band { display: none; }
}

/* ---------- 23. Quién soy: collage y biografía -------------------------- */
/* Medido de "¿Quién soy.png" (1366×1761): collage 0–768, titular 743×280 en
   (278,181), píldora (574,554), cuerpo a x113 con paso de 28 px, cierre 1439–1761. */
.collage {
  position: relative;
  height: calc(768 * var(--u));
  background: var(--ink);
  overflow: hidden;
}

.collage__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
}

.collage__title {
  position: absolute;
  left: calc(278 * var(--u));
  top: calc(188 * var(--u));
  width: calc(742 * var(--u));
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(323 * var(--u));
  line-height: 0.86;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--lime);
  white-space: nowrap;
  transform: scaleX(0.596);
  transform-origin: left top;
  -webkit-text-stroke: calc(5 * var(--u)) currentColor;
  text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--violet);
}

.collage__pill {
  position: absolute;
  left: calc(560 * var(--u));
  top: calc(540 * var(--u));
  margin: 0;
}

.page-quiensoy .page { padding: 0; }
.page-quiensoy .wrap { padding: calc(64 * var(--u)) calc(89 * var(--u)) 0 calc(113 * var(--u)) !important; }
.page-quiensoy .crumbs { display: none; }

.bio { max-width: none; }
.bio p {
  max-width: calc(1164 * var(--u));
  font-size: calc(21 * var(--u));
  letter-spacing: 0.01em;
  line-height: calc(28 * var(--u));
  margin: 0 0 calc(20 * var(--u));
  color: var(--paper);
}

.bio > :last-child { margin-bottom: 0; }
.bio__claim, .bio__firma { margin-top: 0; margin-bottom: 0; }

.cierre {
  margin: 0 calc(-89 * var(--u)) 0 calc(-113 * var(--u));
  width: calc(1366 * var(--u));
  height: calc(322 * var(--u));
  overflow: hidden;
}
.cierre img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cierre figcaption { position: absolute; left: -9999px; }

/* ---------- 24. Menú móvil accesible (§7.1) ----------------------------- */
.nav__toggle { display: none; }

@media (max-width: 1023px) {
  .nav { position: relative; justify-content: flex-start; padding: 10px 16px; }
  .nav__toggle { display: grid; place-content: center; right: 16px; }
  .nav__list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-top: 1px solid var(--gray-700);
    padding: 8px 16px 16px;
  }
  .nav__list[data-open="true"] { display: flex; }
  .nav__link {
    display: block;
    min-height: 48px;          /* objetivo táctil ≥ 48 px */
    display: flex;
    align-items: center;
    font-size: 17px;
    border-bottom: 1px solid var(--gray-900);
  }
}


/* Quién soy: la cabecera se superpone al collage, como en el PNG (que no la incluye) */
.page-quiensoy .band--nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.page-quiensoy .collage { margin-top: 0; }

/* Par de imágenes con pies (artículo de la IA) */
.duo { display: grid; grid-template-columns: 292fr 600fr; gap: calc(24 * var(--u)); align-items: end;
       max-width: calc(916 * var(--u)); }   /* ancho natural: 292 + 24 + 600, sin ampliar */
.duo span { display: block; }
.duo img { width: 100%; height: auto; display: block; border: 1px solid var(--gray-300); background: var(--paper); }
.duo figcaption { font-size: calc(var(--fs-small) * var(--u)); color: var(--gray-700); margin-top: calc(8 * var(--u)); }
@media (max-width: 1023px) { .duo { grid-template-columns: 1fr; gap: 16px; } }

/* ---------- 24. Texto que ya vive en la obra ---------------------------- */
/* Cuando la tipografía forma parte de la ilustración original (retrato del
   hero, cintillo tramado, collage, cifras sobre las láminas), el texto se
   conserva en el DOM —accesible e indexable— pero no se repinta encima:
   repintarlo duplicaba el rótulo (defecto detectado por QA visual 2026-10-24). */
.hero__title,
.hero .pill,
#vision-title, #comp-title, #arm-title,
.eyebrow,
.band--armonia .lead,
.cintillo__text,
.collage__title,
.collage__pill .pill,
.figure,
.work-caption--baked,
.band--armonia .btn {
  color: transparent !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
.hero__title::selection, .cintillo__text::selection { background: var(--lime); color: transparent; }

/* Franjas de trama + titular tomadas del PNG (idénticas al diseño) */
.band__strip { position: absolute; left: 0; right: 0; display: block; background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; }
.band__strip--vision  { top: 0; height: calc(176 * var(--u)); background-image: url("/assets/img/design/strip-vision.webp"); }
.band__strip--comp    { top: 0; height: calc(224 * var(--u)); background-image: url("/assets/img/design/strip-comp.webp"); }
.band__strip--armonia { top: calc(112 * var(--u)); height: calc(160 * var(--u)); background-image: url("/assets/img/design/strip-armonia.webp"); }
.band__strip--armonia-cierre { top: calc(316 * var(--u)); height: calc(782 * var(--u)); background-image: url("/assets/img/design/armonia-cierre.webp"); }

/* CTA de la banda 7: el botón del diseño ya está en la obra; el ancla real
   conserva su caja para seguir siendo clicable y enfocable, sin repintar nada. */
.band--armonia .btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.band--armonia .btn:focus-visible { outline: var(--focus) solid var(--lime); outline-offset: 3px; }

/* «Uso de la IA»: la imagen comparativa va arriba, a sangre de la columna medida */

/* «Uso de la IA»: columna medida del PNG (x107, 1170 de ancho) y figura a x269/y180 */
.art-figure--hero {
  margin-left: calc(181 * var(--u));
  margin-top: calc(94 * var(--u));
  margin-bottom: calc(100 * var(--u));
}

.art-figure--hero img { display: block; width: calc(1028 * var(--u)); height: calc(340 * var(--u)); object-fit: cover; }

/* Columna de artículo medida del PNG: x107 y 1170 px de ancho (1366 de diseño) */
.page-usoia .wrap, .page-articulo .wrap { padding: 0 !important; }
.page-usoia .prose, .page-articulo .prose {
  padding: calc(40 * var(--u)) calc(86 * var(--u)) 0 calc(78 * var(--u));
  max-width: none;
}
.page-usoia .prose p, .page-articulo .prose p {
  font-size: calc(16 * var(--u));
  line-height: calc(22 * var(--u));
  margin: 0 0 calc(22 * var(--u));
  max-width: none;
}

/* Artículo de Guiza: la lámina de apertura va a sangre de la columna */
.art-figure--guiza { margin: calc(-29 * var(--u)) calc(-81 * var(--u)) calc(290 * var(--u)) calc(-78 * var(--u)); max-width: calc(1366 * var(--u)); }
.art-figure--guiza img { display: block; width: calc(1366 * var(--u)); height: calc(643 * var(--u)); object-fit: cover; }

/* El artículo de Guiza lleva en el PNG una barra de navegación sólida color pizarra */
.page-articulo .band--nav { background: #8EA7A4; }
.page-articulo .nav__link { color: #0B1412; }
.page-articulo .nav__link[aria-current="page"] { color: #000; border-bottom-color: #000; }

/* Artículo de Guiza: ritmo medido del PNG (paso 29 px, columna 1207) */
.page-articulo .prose { padding-left: calc(78 * var(--u)); padding-right: calc(81 * var(--u)); }
.page-articulo .prose p { font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); margin: 0 0 calc(22 * var(--u)); }
.page-articulo .prose h2 { font-size: calc(34 * var(--u)); line-height: calc(40 * var(--u)); margin: calc(44 * var(--u)) 0 calc(18 * var(--u)); }