/* Manifiesto: una lectura que hace pasar el día */
.cuadrante { position: fixed; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 5; width: 230px; display: grid; justify-items: center; gap: 10px; pointer-events: none; }
.cuadrante-cv { width: 230px; height: 230px; }
.cuadrante-txt { color: var(--soft); background: var(--bg); padding: 3px 8px; }
.cuadrante-txt span:first-child { color: var(--ink); }

.texto-largo { padding: 0 calc(var(--gutter) + 270px) 0 var(--gutter); }
.m-portada { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-top: 80px; }
.m-portada > .mono:first-child { color: var(--soft); }
.m-titulo { font-size: clamp(76px, 12vw, 220px); line-height: .82; font-weight: 860; letter-spacing: -.05em; }
.m-titulo span { display: block; }
.m-titulo span:nth-child(1) { font-variation-settings: 'wdth' 125; }
.m-titulo span:nth-child(2) { font-variation-settings: 'wdth' 62; padding-left: 8vw; }
.m-titulo span:nth-child(3) { font-variation-settings: 'wdth' 100; }
.m-titulo em { font-style: normal; color: var(--luz); }
.m-pista { color: var(--soft); }

.tesis-lista { display: grid; }
.tesis { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; gap: 18px; border-top: 1px solid var(--linea); padding: 80px 0; }
.t-h { color: var(--luz); }
.t-txt { font-size: clamp(36px, 4.6vw, 82px); line-height: 1.02; font-weight: 700; letter-spacing: -.03em; max-width: 18ch; font-variation-settings: 'wdth' 82; }
.t-txt .w { display: inline-block; opacity: .14; transition: opacity .35s linear, color .35s; }
.t-txt .w.leida { opacity: 1; }
.t-txt .w.foco { color: var(--luz); }
.tesis:nth-child(even) .t-txt { margin-left: auto; text-align: right; font-variation-settings: 'wdth' 70; }

.m-cuenta { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; gap: 14px; border-top: 1px solid var(--linea); }
.m-cuenta .mono { color: var(--soft); }
.cuenta-txt { font-size: clamp(26px, 2.6vw, 44px); line-height: 1.2; max-width: 30ch; letter-spacing: -.01em; }
.cuenta-txt b { font-weight: 800; color: var(--luz); font-variant-numeric: tabular-nums; }

.colofon { padding: 120px 0 140px; border-top: 1px solid var(--linea); display: grid; gap: 60px; }
.firma svg { width: min(640px, 100%); height: auto; overflow: visible; }
.firma svg { width: 100%; }
.trazo-firma { font: 860 190px var(--sans); font-variation-settings: 'wdth' 125; letter-spacing: -.03em; fill: transparent; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 4s cubic-bezier(.5,0,.2,1), fill 1.2s 3.4s; }
.firma.visto .trazo-firma { stroke-dashoffset: 0; fill: var(--ink); }
.firma-linea { stroke: var(--luz); stroke-width: 3; stroke-dasharray: 880; stroke-dashoffset: 880; transition: stroke-dashoffset 2s 3s cubic-bezier(.7,0,.2,1); }
.firma.visto .firma-linea { stroke-dashoffset: 0; }
.creditos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; margin: 0; }
.creditos dt { color: var(--luz); margin-bottom: 8px; }
.creditos dd { margin: 0; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 16px; line-height: 1.5; color: var(--ink); max-width: 46ch; }
.volver { display: grid; gap: 6px; }
.volver .mono { color: var(--soft); }
.volver b { font-size: clamp(70px, 11vw, 190px); line-height: .8; font-weight: 860; letter-spacing: -.05em; font-variation-settings: 'wdth' 62; transition: font-variation-settings 1s cubic-bezier(.2,.8,.2,1), color .5s; }
.volver:hover b { font-variation-settings: 'wdth' 125; color: var(--luz); }

@media (max-width: 900px) {
  .texto-largo { padding: 0 var(--gutter); }
  /* en vertical el cuadrante se vuelve un sello pequeño junto a la marca */
  .cuadrante { top: 60px; bottom: auto; right: 6px; transform: none; width: 84px; z-index: 31; }
  .cuadrante-cv { width: 84px; height: 84px; }
  .cuadrante-txt { display: none; }
  .m-titulo { font-size: 18vw; }
  .m-titulo span:nth-child(1) { font-variation-settings: 'wdth' 100; }
  .m-titulo span:nth-child(2) { padding-left: 4vw; }
  .tesis:nth-child(even) .t-txt { margin-left: 0; text-align: left; }
  .creditos { grid-template-columns: 1fr; }
}