@charset "UTF-8";

/* ============================================================================
   ConstrucTEK S.A. — Recorrido de obra
   ----------------------------------------------------------------------------
   TESIS        Un recorrido de obra a oscuras, no una página de constructora.
                Rechaza el arreglo por defecto de la categoría —portada, tres
                tarjetas de servicio con icono, franja de cifras, formulario— y
                lo sustituye por la lámina a sangre y el registro de filas.
   MUNDO PROPIO Carbón #0d0f10 como suelo continuo; un único corte de luz en
                papel #f5f2ea; bosque #1f3a2e en dos regiones completas; oro
                #b99a5b solo como filete, numeral y área de acción. Host
                Grotesk variable, al ancho natural de la letra. Superficies de
                esquina viva, controles en píldora con vidrio.
   HISTORIA     Obra terminada a pantalla completa → la escala en tres cifras →
                el método → el corte de luz de la empresa → la obra real
                arrastrable → WhatsApp como el elemento mayor de la pantalla.
   1er VIEWPORT Foto a sangre 100svh con escala lenta y parallax. Título en
                display abajo a la izquierda, alzado tras máscara y aterrizando
                su peso de 620 a 700. Acción de oro debajo. Pie de imprenta a la
                derecha sobre filete.
   FORMA        Lámina + registro + colofón. Aquí no existe la tarjeta.

   Reglas vinculantes en DESIGN.md. Marca, paleta y textos: intactos.
   ========================================================================= */

/* ── Tipografía: una sola familia variable ────────────────────────────────── */
/* Host Grotesk (SIL OFL), alojada localmente en dos subconjuntos con
   `unicode-range`: el español solo descarga el primero. Sin eje de ancho a
   propósito — la letra se usa a su ancho natural. */

@font-face {
  font-family: "Host Grotesk";
  src: url("../fonts/host-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Host Grotesk";
  src: url("../fonts/host-latin-ext.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  /* Suelos */
  --carbon: #0d0f10;
  --grafito: #1a1d1f;
  --grafito-alto: #22272a;
  --papel: #f5f2ea;
  --papel-hondo: #ece8dd;
  --bosque: #1f3a2e;
  --bosque-hondo: #16291f;

  /* Tinta sobre suelo oscuro */
  --papel-suave: #d7d7d2;
  --papel-tenue: #a8aaa4;

  /* Tinta sobre papel */
  --tinta: #101314;
  --tinta-suave: #4a4f4d;
  --tinta-tenue: #5c6260;

  /* Acento */
  --oro: #b99a5b;
  --oro-vivo: #cdae6e; /* mismo matiz, aclarado para el barrido de hover */
  --oro-tinta: #7d5f26; /* mismo matiz, legible sobre papel (5,3:1) */

  /* Filetes */
  --filete-claro: rgba(245, 242, 234, 0.16);
  --filete-claro-fuerte: rgba(245, 242, 234, 0.34);
  --filete-ink: rgba(16, 19, 20, 0.16);
  --filete-ink-fuerte: rgba(16, 19, 20, 0.32);

  /* Rejilla */
  --cols: 4;
  --margen: 20px;
  --canal: 14px;
  --ancho-max: 1560px;
  --masthead-h: 52px;
  --masthead-sep: 12px;

  /* Forma */
  --radio-accion: 999px;
  --radio-control: 12px;

  /* Profundidad: solo lo que flota */
  --sombra-flotante: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 36px -10px rgba(0, 0, 0, 0.6);
  --sombra-panel: 0 4px 10px rgba(0, 0, 0, 0.32), 0 32px 72px -18px rgba(0, 0, 0, 0.72);

  /* Escala tipográfica — única fuente de tamaños del sitio */
  --t-display: clamp(2.5rem, 1.1rem + 5.6vw, 6rem);
  --t-display-portada: max(2.25rem, min(var(--t-display), 8svh));
  --t-display-corto: clamp(1.875rem, 4vw, 2.75rem);
  --t-capitulo: clamp(1.875rem, 1rem + 3.4vw, 3.75rem);
  --t-cifra: clamp(3rem, 1.2rem + 6.4vw, 5.5rem);
  --t-cifra-celda: clamp(2.125rem, 1rem + 3.6vw, 3.75rem);
  --t-menu: clamp(1.625rem, 1rem + 3.2vw, 2.5rem);
  --t-titular: clamp(1.375rem, 1rem + 1.7vw, 2.125rem);
  --t-subtitulo: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --t-paso: clamp(1.1875rem, 0.95rem + 0.8vw, 1.625rem);
  --t-entrada: clamp(1.0625rem, 0.95rem + 0.55vw, 1.4375rem);
  --t-guia: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --t-destacado: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
  --t-cuerpo: clamp(1rem, 0.95rem + 0.22vw, 1.1875rem);
  --t-lista: clamp(0.9375rem, 0.9rem + 0.3vw, 1.125rem);
  --t-base: 1rem;
  --t-menor: 0.9375rem;
  --t-nota: 0.8125rem;
  --t-folio: 0.6875rem;
  --t-folio-min: 0.6875rem;

  /* Ritmo */
  --aire-capitulo: clamp(88px, 10vw, 176px);

  /* Movimiento */
  --sal: cubic-bezier(0.16, 1, 0.3, 1); /* exponencial de salida: revelados */
  --sal-ui: cubic-bezier(0.23, 1, 0.32, 1); /* salida fuerte: interfaz */
  --vaiven: cubic-bezier(0.77, 0, 0.175, 1); /* entrada y salida: movimiento */
  --d-pulsacion: 140ms;
  --d-ui: 220ms;
  --d-panel: 320ms;
  --d-revelado: 820ms;

  /* Voces tipográficas */
  --familia: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, sans-serif;

  color-scheme: dark;
}

@media (min-width: 600px) {
  :root {
    --cols: 8;
    --margen: 32px;
    --canal: 18px;
  }
}

@media (min-width: 900px) {
  :root {
    --cols: 12;
    --margen: 48px;
    --canal: 20px;
    --masthead-h: 60px;
    --masthead-sep: 16px;
  }
}

@media (min-width: 1200px) {
  :root {
    --margen: clamp(56px, 5vw, 96px);
    --canal: 24px;
  }
}

/* ── Reinicio ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h) + var(--masthead-sep) + 24px);
  background: var(--carbon);
}

body {
  background: var(--carbon);
  color: var(--papel-suave);
  font-family: var(--familia);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

body.menu-abierto {
  overflow: hidden;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Los atributos width/height del HTML llegan como sugerencia de presentación y
   ganarían sobre `aspect-ratio`; `height: auto` los devuelve a su sitio y deja
   que la relación de aspecto de cada componente mande. */
img {
  height: auto;
  border-radius: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

dl,
dd {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
}

.capitulo--papel :focus-visible,
.cuerpo-portafolio .capitulo--papel :focus-visible {
  outline-color: var(--oro-tinta);
}

::selection {
  background: var(--oro);
  color: var(--carbon);
}

/* ── Utilidades ───────────────────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salto {
  position: fixed;
  top: -200px;
  left: var(--margen);
  z-index: 200;
  padding: 12px 20px;
  background: var(--oro);
  color: var(--carbon);
  border-radius: var(--radio-accion);
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  transition: top var(--d-ui) var(--sal-ui);
}

.salto:focus-visible {
  top: calc(var(--masthead-sep) + env(safe-area-inset-top));
}

/* ── Rejilla editorial ────────────────────────────────────────────────────── */

.pliego {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--canal);
}

/* ── Voces tipográficas ───────────────────────────────────────────────────── */

.display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.026em;
  text-wrap: balance;
  color: var(--papel);
}

.capitulo__titulo {
  font-size: var(--t-capitulo);
  font-weight: 660;
  line-height: 1.05;
  letter-spacing: -0.024em;
  text-wrap: balance;
  color: var(--papel);
}

.capitulo__titulo--tinta {
  color: var(--tinta);
}

.cifra {
  display: block;
  font-size: var(--t-cifra);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.038em;
  color: var(--papel);
}

.cifra__unidad {
  font-size: 0.52em;
  letter-spacing: -0.02em;
  color: var(--oro);
}

.folio {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--t-folio);
  font-weight: 560;
  line-height: 1.4;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--papel-tenue);
}

.folio__num {
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}

.folio--tinta {
  color: var(--tinta-tenue);
}

.folio--tinta .folio__num {
  color: var(--oro-tinta);
}

.rotulo {
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--papel-tenue);
}

.parrafo {
  color: var(--papel-suave);
  max-width: 64ch;
  text-wrap: pretty;
}

.parrafo--guia {
  font-size: var(--t-guia);
  line-height: 1.55;
}

.parrafo--tinta {
  color: var(--tinta-suave);
}

.pie-foto {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-tenue);
}

.pie-foto__num {
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}

.nota {
  font-size: var(--t-nota);
  color: var(--papel-tenue);
}

/* ── Máscara de alzado (para títulos) ─────────────────────────────────────── */

.alza {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.alza__int {
  display: block;
}

/* ── Sistema de revelado ──────────────────────────────────────────────────── */
/* El estado por defecto del HTML es visible. La clase `js` habilita el estado
   oculto: sin JavaScript no se pierde absolutamente nada. */

.js [data-reveal] [data-rev] {
  opacity: 0;
  transform: translate3d(0, var(--rev-y, 20px), 0);
  transition: opacity var(--d-revelado) var(--sal), transform var(--d-revelado) var(--sal);
  transition-delay: calc(var(--retardo, 0) * 70ms + 240ms);
}

.js [data-reveal].es-visible [data-rev] {
  opacity: 1;
  transform: none;
}

.js [data-reveal] [data-rev-filete] {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--sal);
}

.js [data-reveal].es-visible [data-rev-filete] {
  transform: none;
}

.js [data-reveal] .alza__int {
  transform: translate3d(0, 112%, 0);
  transition: transform 900ms var(--sal);
  transition-delay: calc(var(--retardo, 0) * 70ms + 130ms);
}

.js [data-reveal].es-visible .alza__int {
  transform: none;
}

/* ── Filete de apertura de capítulo ───────────────────────────────────────── */

.filete-capitulo {
  position: relative;
  display: block;
  grid-column: 1 / -1;
  height: 1px;
  background: var(--filete-claro);
  margin-bottom: clamp(20px, 2.4vw, 34px);
}

.filete-capitulo::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 72px;
  background: var(--oro);
}

.capitulo--papel .filete-capitulo {
  background: var(--filete-ink);
}

.capitulo--papel .filete-capitulo::before {
  background: var(--oro-tinta);
}

/* ── Acciones ─────────────────────────────────────────────────────────────── */

.accion {
  --accion-alto: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--accion-alto);
  padding: 0 clamp(22px, 2.4vw, 32px);
  border: 1px solid transparent;
  border-radius: var(--radio-accion);
  font-size: var(--t-folio);
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-pulsacion) var(--sal-ui), color var(--d-ui) var(--sal-ui),
    border-color var(--d-ui) var(--sal-ui), background-color var(--d-ui) var(--sal-ui);
}

.accion > * {
  position: relative;
  z-index: 1;
}

.accion:active {
  transform: scale(0.97);
}

/* Primaria: el área de oro. El barrido de hover es un clip, no un degradado. */
.accion--oro {
  background: var(--oro);
  color: var(--carbon);
}

.accion--oro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--oro-vivo);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-panel) var(--sal-ui);
}

.accion--fantasma {
  border-color: var(--filete-claro-fuerte);
  color: var(--papel);
}

.accion--fantasma-tinta {
  border-color: var(--filete-ink-fuerte);
  color: var(--tinta);
}

.accion--claro {
  background: var(--papel);
  color: var(--carbon);
}

.accion--compacto {
  --accion-alto: 40px;
  padding-inline: 18px;
  font-size: var(--t-folio-min);
  letter-spacing: 0.12em;
}

/* Por debajo de 900px la conversión la lleva la barra de oro fija al borde
   inferior; una segunda acción en la cabecera solo compite con ella. */
@media (max-width: 899px) {
  .masthead .accion--compacto {
    display: none;
  }
}

.accion--ancho {
  display: flex;
  width: 100%;
}

.accion__flecha {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--d-ui) var(--sal-ui);
}

@media (hover: hover) and (pointer: fine) {
  .accion--oro:hover::before {
    clip-path: inset(0 0 0 0);
  }

  .accion--fantasma:hover {
    border-color: var(--papel);
    background: rgba(245, 242, 234, 0.08);
  }

  .accion--fantasma-tinta:hover {
    border-color: var(--tinta);
    background: rgba(16, 19, 20, 0.06);
  }

  .accion--claro:hover {
    background: var(--oro);
  }

  .accion:hover .accion__flecha {
    transform: translateX(4px);
  }
}

/* ── Cabecera flotante ────────────────────────────────────────────────────── */

.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: calc(var(--masthead-sep) + env(safe-area-inset-top)) var(--margen) 0;
  pointer-events: none;
}

.masthead__interior {
  position: relative;
  pointer-events: auto;
  max-width: var(--ancho-max);
  margin-inline: auto;
  height: var(--masthead-h);
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  padding-inline: clamp(14px, 1.5vw, 22px);
  border: 1px solid var(--filete-claro);
  border-radius: var(--radio-accion);
  background: rgba(13, 15, 16, 0.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  transition: background-color var(--d-panel) var(--sal-ui), border-color var(--d-panel) var(--sal-ui),
    box-shadow var(--d-panel) var(--sal-ui), transform var(--d-panel) var(--sal-ui);
}

.masthead[data-fijo] .masthead__interior {
  background: rgba(13, 15, 16, 0.88);
  border-color: var(--filete-claro-fuerte);
  box-shadow: var(--sombra-flotante);
  transform: translate3d(0, -3px, 0) scale(0.99);
}

.marca {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  transition: opacity var(--d-ui) var(--sal-ui);
}

.marca__logo {
  height: 22px;
  width: auto;
}

@media (min-width: 900px) {
  .marca__logo {
    height: 26px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .marca:hover {
    opacity: 0.72;
  }
}

.navegacion {
  display: none;
}

@media (min-width: 900px) {
  .navegacion {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.8vw, 30px);
    margin-inline: auto;
  }
}

.navegacion a {
  position: relative;
  padding-block: 8px;
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-tenue);
  transition: color var(--d-ui) var(--sal-ui);
}

.navegacion a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transition: transform var(--d-ui) var(--sal-ui);
}

.navegacion a[aria-current] {
  color: var(--papel);
}

.navegacion a[aria-current]::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .navegacion a:hover {
    color: var(--papel);
  }

  .navegacion a:hover::after {
    transform: scaleX(1);
  }
}

.masthead__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (min-width: 900px) {
  .masthead__acciones {
    margin-left: 0;
  }
}

/* ── Selector de idioma ───────────────────────────────────────────────────── */

.idioma {
  position: relative;
}

.idioma__disparador {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--filete-claro);
  border-radius: var(--radio-accion);
  font-size: var(--t-folio-min);
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-suave);
  transition: border-color var(--d-ui) var(--sal-ui), color var(--d-ui) var(--sal-ui),
    transform var(--d-pulsacion) var(--sal-ui);
}

.idioma__disparador:active {
  transform: scale(0.97);
}

.idioma__marca {
  width: 9px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform var(--d-ui) var(--sal-ui);
}

.idioma__disparador[aria-expanded="true"] .idioma__marca {
  transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .idioma__disparador:hover {
    border-color: var(--papel-tenue);
    color: var(--papel);
  }
}

.idioma__lista {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 10;
  min-width: 188px;
  padding: 6px;
  border: 1px solid var(--filete-claro-fuerte);
  border-radius: var(--radio-control);
  background: rgba(21, 24, 26, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--sombra-flotante);
  transform-origin: 100% 0;
}

.idioma__lista[hidden] {
  display: none;
}

.idioma__lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border-radius: calc(var(--radio-control) - 6px);
  font-size: var(--t-menor);
  color: var(--papel-suave);
  cursor: pointer;
  transition: background-color var(--d-ui) var(--sal-ui), color var(--d-ui) var(--sal-ui);
}

.idioma__lista li span:last-child {
  font-size: var(--t-folio-min);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-tenue);
}

.idioma__lista li[data-activo] {
  color: var(--oro);
}

.idioma__lista li[data-activo] span:last-child {
  color: var(--oro);
}

@media (hover: hover) and (pointer: fine) {
  .idioma__lista li:hover {
    background: rgba(245, 242, 234, 0.07);
    color: var(--papel);
  }
}

/* ── Hamburguesa ──────────────────────────────────────────────────────────── */

.hamburguesa {
  display: grid;
  place-content: center;
  gap: 5px;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--filete-claro);
  border-radius: var(--radio-accion);
  transition: border-color var(--d-ui) var(--sal-ui), transform var(--d-pulsacion) var(--sal-ui);
}

.hamburguesa:active {
  transform: scale(0.94);
}

@media (min-width: 900px) {
  .hamburguesa {
    display: none;
  }
}

.hamburguesa__trazo {
  display: block;
  width: 15px;
  height: 1px;
  background: var(--papel);
  transition: transform var(--d-panel) var(--sal-ui), opacity var(--d-ui) var(--sal-ui);
}

.hamburguesa[aria-expanded="true"] .hamburguesa__trazo--alto {
  transform: translateY(3px) rotate(45deg);
}

.hamburguesa[aria-expanded="true"] .hamburguesa__trazo--bajo {
  transform: translateY(-3px) rotate(-45deg);
}

/* ── Lámina de menú (teléfono) ────────────────────────────────────────────── */

.lamina-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--masthead-h) + var(--masthead-sep) * 2 + env(safe-area-inset-top) + 24px)
    var(--margen) calc(28px + env(safe-area-inset-bottom));
  background: var(--carbon);
  overflow-y: auto;
}

.lamina-menu[hidden] {
  display: none;
}

.lamina-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lamina-menu__nav a {
  padding-block: 14px;
  border-top: 1px solid var(--filete-claro);
  font-size: var(--t-menu);
  font-weight: 660;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--papel);
  animation: menu-entra 480ms var(--sal) backwards;
  animation-delay: calc(var(--indice, 0) * 45ms + 60ms);
}

@keyframes menu-entra {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
}

.lamina-menu__pie {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lamina-menu__idiomas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lamina-menu__idiomas button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--filete-claro);
  border-radius: var(--radio-accion);
  font-size: var(--t-folio-min);
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--papel-tenue);
  transition: color var(--d-ui) var(--sal-ui), border-color var(--d-ui) var(--sal-ui),
    transform var(--d-pulsacion) var(--sal-ui);
}

.lamina-menu__idiomas button:active {
  transform: scale(0.95);
}

.lamina-menu__idiomas button[data-activo] {
  border-color: var(--oro);
  color: var(--oro);
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTADA
   ═════════════════════════════════════════════════════════════════════════ */

.portada {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: max(560px, 100svh);
  padding-block: calc(var(--masthead-h) + 72px) clamp(40px, 6vh, 76px);
  background: var(--carbon);
  overflow: hidden;
  isolation: isolate;
}

.portada__lamina {
  position: absolute;
  inset: -8% 0;
  z-index: -2;
  will-change: transform;
  transform: translate3d(0, var(--par, 0px), 0);
}

.portada__lamina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}

/* La escala de entrada vive dentro de `.js`: sin JavaScript no hay nada que la
   devuelva a 1 y la lámina se quedaría recortada un 10% para siempre. */
.js .portada__lamina img {
  transform: scale(1.1);
}

.js .portada.es-visible .portada__lamina img {
  transform: scale(1);
  transition: transform 1800ms var(--sal);
}

/* Escrim por capas: su único propósito es el contraste y fundir la lámina
   con el suelo del capítulo siguiente. */
.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(13, 15, 16, 0.82) 0%,
      rgba(13, 15, 16, 0.42) 30%,
      rgba(13, 15, 16, 0.58) 62%,
      rgba(13, 15, 16, 0.94) 88%,
      var(--carbon) 100%
    ),
    var(--escrim-lateral, none);
}

.portada__contenido {
  width: 100%;
  align-items: end;
  row-gap: clamp(28px, 4vw, 44px);
}

.portada__bloque {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 30px);
}

@media (min-width: 900px) {
  .portada__bloque {
    grid-column: 1 / span 8;
  }
}

@media (min-width: 1200px) {
  .portada__bloque {
    grid-column: 1 / span 7;
  }
}

.portada__folio {
  gap: 14px;
  /* Sobre fotografía el tono `papel-tenue` no alcanza el 4,5:1 exigido. */
  color: var(--papel-suave);
}

.portada__titulo {
  font-size: var(--t-display-portada);
  max-width: 16ch;
}

.js .portada .portada__titulo {
  font-weight: 620;
  transition: font-weight 1400ms var(--sal) 200ms;
}

.js .portada.es-visible .portada__titulo {
  font-weight: 700;
}

.portada__entrada {
  font-size: var(--t-entrada);
  line-height: 1.42;
  max-width: 46ch;
  color: var(--papel-suave);
  text-wrap: pretty;
}

.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Pie de imprenta: datos duros sobre filete, a la derecha */
.imprenta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(20px, 3vw, 44px);
  padding-top: 18px;
  border-top: 1px solid var(--filete-claro);
}

@media (min-width: 900px) {
  .portada__contenido {
    grid-template-rows: auto auto;
  }

  .imprenta {
    grid-column: 9 / -1;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 12px;
    align-self: end;
  }
}

.imprenta__linea dd {
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-tenue);
}

/* En teléfono el bloque de texto ocupa dos tercios de la portada, así que el
   escrim vertical tiene que garantizar el contraste de TODO ese bloque sobre
   la parte más clara de la fotografía —medido, no supuesto—. Arriba queda una
   ventana de obra a la vista; de ahí abajo manda la legibilidad. */
@media (max-width: 599px) {
  .portada::after {
    background: linear-gradient(
      180deg,
      rgba(13, 15, 16, 0.74) 0%,
      rgba(13, 15, 16, 0.3) 13%,
      rgba(13, 15, 16, 0.74) 25%,
      rgba(13, 15, 16, 0.88) 52%,
      rgba(13, 15, 16, 0.95) 78%,
      var(--carbon) 97%
    );
  }
}

/* El escrim lateral solo existe donde el texto ocupa una columna y deja ver la
   fotografía al lado. En teléfono el texto cruza todo el ancho, así que un
   degradado horizontal solo taparía la obra: ahí basta el vertical. */
@media (min-width: 600px) {
  .portada {
    --escrim-lateral: linear-gradient(
      96deg,
      rgba(13, 15, 16, 0.78) 0%,
      rgba(13, 15, 16, 0.5) 38%,
      rgba(13, 15, 16, 0.16) 68%,
      transparent 90%
    );
  }

  .plancha {
    --escrim-lateral: linear-gradient(
      94deg,
      rgba(13, 15, 16, 0.84) 0%,
      rgba(13, 15, 16, 0.68) 42%,
      rgba(13, 15, 16, 0.4) 70%,
      rgba(13, 15, 16, 0.1) 88%,
      transparent 98%
    );
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPÍTULOS
   ═════════════════════════════════════════════════════════════════════════ */

.capitulo {
  position: relative;
}

.capitulo--carbon {
  background: var(--carbon);
}

.capitulo--grafito {
  background: var(--grafito);
}

.capitulo--bosque {
  background: var(--bosque);
  color: var(--papel-suave);
}

.capitulo--papel {
  background: var(--papel);
  color: var(--tinta-suave);
}

.capitulo__interior {
  padding-block: var(--aire-capitulo);
  row-gap: clamp(26px, 3vw, 46px);
}

/* El capítulo continúa fuera del pliego (el rail de obra): el aire de cierre
   lo pone el elemento que va después, no este. */
.capitulo__interior--sin-pie {
  padding-bottom: 0;
}

.capitulo__folio {
  grid-column: 1 / -1;
}

.capitulo__cuerpo {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.8vw, 38px);
}

@media (min-width: 900px) {
  .capitulo__folio {
    grid-column: 1 / span 2;
  }

  .capitulo__cuerpo {
    grid-column: 3 / -1;
  }

  .capitulo--verso .capitulo__folio {
    grid-column: 11 / -1;
    justify-content: flex-end;
  }

  .capitulo--verso .capitulo__cuerpo {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .capitulo--ancho .capitulo__folio {
    grid-column: 1 / -1;
  }

  .capitulo--ancho .capitulo__cuerpo {
    grid-column: 1 / -1;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   I · CIFRAS + MANIFIESTO
   ═════════════════════════════════════════════════════════════════════════ */

/* Colofón de cifras: registro de tres filas. La cifra manda en la mitad
   izquierda y el rótulo ocupa la derecha; así ninguna cadena larga —el alemán
   es el que rompe— aprieta a la cifra, y la cifra nunca se sale de su celda. */
.colofon {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.colofon__celda {
  display: grid;
  gap: 12px;
  padding-block: clamp(24px, 2.8vw, 40px);
  border-top: 1px solid var(--filete-claro);
}

.colofon__celda:last-child {
  border-bottom: 1px solid var(--filete-claro);
}

@media (min-width: 720px) {
  .colofon__celda {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(24px, 3.2vw, 56px);
    align-items: baseline;
  }

  /* El rótulo ancla al margen derecho: el filete que cruza la fila pasa a ser
     la medida de la cifra, como en un libro de contabilidad. */
  .colofon__pie {
    justify-self: end;
    text-align: right;
  }

  /* Acotada al ancho de su propia celda, no al del viewport. */
  .colofon .cifra {
    font-size: min(var(--t-cifra), 8.6cqi);
  }
}

.colofon__pie {
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-tenue);
  max-width: 28ch;
}

/* Manifiesto en escalera: sustituye a la fila de tres tarjetas */
.manifiesto {
  display: grid;
  row-gap: clamp(30px, 4vw, 52px);
  margin-top: clamp(30px, 4vw, 58px);
}

.manifiesto__pieza {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--filete-claro);
}

.manifiesto__titulo {
  font-size: var(--t-titular);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: var(--papel);
  text-wrap: balance;
}

.manifiesto__texto {
  font-size: var(--t-destacado);
  color: var(--papel-suave);
  max-width: 52ch;
  text-wrap: pretty;
}

@media (min-width: 900px) {
  .manifiesto {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--canal);
  }

  .manifiesto__pieza:nth-child(1) {
    grid-column: 1 / span 6;
  }

  .manifiesto__pieza:nth-child(2) {
    grid-column: 4 / span 6;
  }

  .manifiesto__pieza:nth-child(3) {
    grid-column: 7 / span 6;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   II · MÉTODO (secuencia con columna fija)
   ═════════════════════════════════════════════════════════════════════════ */

.metodo__reja {
  display: grid;
  row-gap: clamp(28px, 3.5vw, 44px);
}

@media (min-width: 900px) {
  .metodo__reja {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 88px);
    align-items: start;
  }

  .metodo__fija {
    position: sticky;
    top: calc(var(--masthead-h) + var(--masthead-sep) + clamp(40px, 8vh, 96px));
  }
}

.metodo__fija {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 32px);
}

.metodo__cuenta {
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.17em;
  color: var(--papel-tenue);
  font-variant-numeric: tabular-nums;
  margin-top: -8px;
}

.metodo__marcas {
  display: flex;
  gap: 8px;
}

.metodo__marca {
  position: relative;
  flex: 1 1 0;
  max-width: 56px;
  height: 2px;
  background: rgba(245, 242, 234, 0.22);
  overflow: hidden;
}

.metodo__marca::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 520ms var(--sal-ui);
}

.metodo__marca[data-activo]::after {
  transform: none;
}

.secuencia {
  display: flex;
  flex-direction: column;
}

.secuencia__paso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(16px, 2.2vw, 30px);
  row-gap: 10px;
  padding-block: clamp(26px, 3.2vw, 46px);
  border-top: 1px solid var(--filete-claro);
}

.secuencia__paso:last-child {
  border-bottom: 1px solid var(--filete-claro);
}

.secuencia__num {
  grid-row: 1 / span 2;
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  padding-top: 0.5em;
  transition: color var(--d-ui) var(--sal-ui);
}

.secuencia__titulo {
  font-size: var(--t-paso);
  font-weight: 640;
  line-height: 1.14;
  letter-spacing: -0.024em;
  color: var(--papel);
  text-wrap: balance;
}

.secuencia__texto {
  font-size: var(--t-destacado);
  color: var(--papel-suave);
  max-width: 54ch;
  text-wrap: pretty;
}

/* ══════════════════════════════════════════════════════════════════════════
   III · SEMBLANZA — el único corte de luz
   ═════════════════════════════════════════════════════════════════════════ */

.semblanza-marco {
  max-width: none;
  padding-left: max(var(--margen), calc(50vw - var(--ancho-max) / 2));
  padding-right: var(--margen);
  padding-block: var(--aire-capitulo);
  display: block;
}

.semblanza {
  display: grid;
  row-gap: clamp(32px, 4vw, 52px);
}

.semblanza__texto {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 34px);
  max-width: 62ch;
}

.semblanza__figura {
  position: relative;
  overflow: hidden;
}

.semblanza__figura picture {
  display: block;
  overflow: hidden;
}

.semblanza__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1400ms var(--sal);
}

.js [data-reveal].es-visible .semblanza__figura img {
  transform: scale(1);
}

.semblanza__figura .pie-foto {
  color: var(--tinta-tenue);
  padding-inline: 2px;
}

@media (min-width: 1000px) {
  .semblanza-marco {
    padding-right: 0;
  }

  .semblanza {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    column-gap: clamp(36px, 5vw, 88px);
    align-items: center;
  }

  .semblanza__figura img {
    aspect-ratio: 3 / 4;
  }
}

/* Rasgos: registro de tres filas sobre papel */
.rasgos {
  display: flex;
  flex-direction: column;
}

.rasgos__fila {
  display: grid;
  gap: 8px;
  padding-block: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--filete-ink);
}

.rasgos__fila:last-child {
  border-bottom: 1px solid var(--filete-ink);
}

@media (min-width: 700px) {
  .rasgos__fila {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(20px, 3vw, 40px);
    align-items: start;
  }
}

.rasgos__titulo {
  font-size: var(--t-subtitulo);
  font-weight: 640;
  line-height: 1.16;
  letter-spacing: -0.024em;
  color: var(--tinta);
  text-wrap: balance;
}

.rasgos__texto {
  font-size: var(--t-cuerpo);
  color: var(--tinta-suave);
  max-width: 54ch;
  text-wrap: pretty;
}

/* Doctrina: visión y misión, banda tranquila */
.doctrina {
  display: grid;
  gap: clamp(28px, 3.5vw, 52px);
}

@media (min-width: 800px) {
  .doctrina {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.doctrina__bloque {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--filete-claro);
}

.doctrina__titulo {
  font-size: var(--t-titular);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.026em;
  color: var(--papel);
}

/* ══════════════════════════════════════════════════════════════════════════
   IV · PLANCHA a sangre
   ═════════════════════════════════════════════════════════════════════════ */

.plancha {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92svh, 860px);
  padding-block: clamp(80px, 12vh, 150px) clamp(48px, 8vh, 96px);
  background: var(--carbon);
  overflow: hidden;
  isolation: isolate;
}

@media (max-width: 599px) {
  /* Alto suficiente para que la obra tenga ventana propia por encima del
     bloque de texto: con 560px el texto ocupaba el 71% del plano y no quedaba
     fotografía que mirar. */
  .plancha {
    min-height: min(90svh, 780px);
  }
}

.plancha__lamina {
  position: absolute;
  inset: -8% 0;
  z-index: -2;
  will-change: transform;
  transform: translate3d(0, var(--par, 0px), 0);
}

.plancha__lamina img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.plancha::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      var(--carbon) 0%,
      rgba(13, 15, 16, 0.68) 14%,
      rgba(13, 15, 16, 0.28) 44%,
      rgba(13, 15, 16, 0.82) 84%,
      var(--carbon) 100%
    ),
    var(--escrim-lateral, none);
}

/* Misma razón que en la portada: en teléfono el bloque de texto ocupa medio
   plano, así que el escrim vertical carga solo con todo el contraste. Va
   después de la regla base a propósito: si se declara antes, la cascada la
   descarta por orden de origen. */
@media (max-width: 599px) {
  .plancha::after {
    background: linear-gradient(
      180deg,
      var(--carbon) 0%,
      rgba(13, 15, 16, 0.55) 7%,
      rgba(13, 15, 16, 0.26) 24%,
      rgba(13, 15, 16, 0.84) 37%,
      rgba(13, 15, 16, 0.94) 74%,
      var(--carbon) 98%
    );
  }
}

.plancha__contenido {
  width: 100%;
  row-gap: clamp(24px, 3vw, 40px);
}

/* Sobre fotografía el folio sube un tono, igual que el cuerpo. */
.plancha .folio {
  color: var(--papel-suave);
}

/* Sobre fotografía el cuerpo va en `papel`, no en `papel-suave`: el tono
   apagado que funciona sobre suelo liso no llega al 4,5:1 contra la parte más
   clara de una obra iluminada. Y la medida se acorta, para que el párrafo no
   se alargue hasta donde el escrim ya se abrió. */
.plancha .parrafo {
  max-width: 52ch;
  color: var(--papel);
}

.plancha .capitulo__cuerpo {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .plancha .capitulo__folio {
    grid-column: 1 / span 2;
  }

  .plancha .capitulo__cuerpo {
    grid-column: 3 / span 7;
  }
}

.listado-filete {
  display: flex;
  flex-direction: column;
}

.listado-filete li {
  position: relative;
  padding: clamp(14px, 1.8vw, 20px) 0 clamp(14px, 1.8vw, 20px) 30px;
  border-top: 1px solid var(--filete-claro);
  font-size: var(--t-lista);
  font-weight: 560;
  letter-spacing: 0.02em;
  color: var(--papel);
}

.listado-filete li:last-child {
  border-bottom: 1px solid var(--filete-claro);
}

.listado-filete li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(14px, 1.8vw, 20px) + 0.62em);
  width: 14px;
  height: 1px;
  background: var(--oro);
}

/* ══════════════════════════════════════════════════════════════════════════
   V · REGISTRO (disciplinas) — sustituye por completo a la tarjeta
   ═════════════════════════════════════════════════════════════════════════ */

.registro {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.registro__fila {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 14px;
  padding: clamp(24px, 3vw, 42px) 0;
  border-top: 1px solid var(--filete-claro);
  transition: background-color var(--d-ui) var(--sal-ui);
}

.registro__fila:last-child {
  border-bottom: 1px solid var(--filete-claro);
}

.registro__num {
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  padding-top: 0.6em;
}

.registro__titulo {
  font-size: var(--t-capitulo);
  font-weight: 660;
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--papel);
  transition: transform var(--d-panel) var(--sal-ui), color var(--d-panel) var(--sal-ui);
}

.registro__texto {
  grid-column: 2;
  font-size: var(--t-destacado);
  color: var(--papel-suave);
  max-width: 54ch;
  text-wrap: pretty;
}

.registro__lamina {
  grid-column: 2;
  display: block;
  overflow: hidden;
}

.registro__lamina img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.registro__enlace {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-tenue);
  transition: color var(--d-ui) var(--sal-ui);
}

.registro__enlace::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: transform var(--d-ui) var(--sal-ui);
}

/* Dos regímenes de escritorio para el registro:
   900–1099px  el ancho no alcanza para una lámina, así que la fila es
               numeral · título · texto · enlace y la miniatura se retira.
   ≥1100px     la lámina gana columna propia al final de la fila y el enlace
               baja bajo el texto, que así conserva una medida de lectura real.
               El registro es un índice de obra: cada fila enseña su lámina
               desde el principio y al señalar la fotografía se acerca dentro
               de su marco, sin superponerse nunca al título ni al texto. */
@media (min-width: 900px) {
  .registro__fila {
    grid-template-columns: 56px minmax(0, 5fr) minmax(0, 5fr) auto;
    align-items: center;
    column-gap: clamp(18px, 2.2vw, 36px);
    padding-inline: clamp(12px, 1.4vw, 20px);
    margin-inline: calc(-1 * clamp(12px, 1.4vw, 20px));
  }

  .registro__num {
    padding-top: 0;
  }

  .registro__texto,
  .registro__enlace {
    grid-column: auto;
  }

  .registro__lamina {
    display: none;
  }

  /* Acotado al ancho del registro: «Consultoría» es la cadena más larga de las
     siete lenguas y no debe invadir la columna de texto. En teléfono el título
     ocupa su propia línea y no necesita tope. */
  .registro__titulo {
    font-size: min(var(--t-capitulo), 5.2cqi);
  }
}

@media (min-width: 1100px) {
  .registro__fila {
    grid-template-columns:
      56px minmax(0, 5fr) minmax(0, 5fr)
      clamp(170px, 15vw, 230px);
    grid-template-rows: auto auto;
    column-gap: clamp(20px, 2.4vw, 40px);
    row-gap: 0;
  }

  .registro__num {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .registro__titulo {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .registro__texto {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
  }

  .registro__enlace {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    margin-top: 16px;
  }

  .registro__lamina {
    display: block;
    grid-column: 4;
    grid-row: 1 / span 2;
    height: clamp(120px, 11vw, 168px);
  }

  .registro__lamina img {
    height: 100%;
    aspect-ratio: auto;
    transition: transform 700ms var(--sal-ui);
  }
}

@media (hover: hover) and (pointer: fine) {
  .registro__fila:hover {
    background: var(--grafito-alto);
  }

  .registro__fila:hover .registro__titulo {
    transform: translateX(10px);
  }

  .registro__fila:hover .registro__enlace {
    color: var(--oro);
  }

  .registro__fila:hover .registro__enlace::after {
    transform: translateX(6px);
  }

  .registro__fila:hover .registro__lamina img {
    transform: scale(1.06);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   VI · TOMOS de portafolio
   ═════════════════════════════════════════════════════════════════════════ */

/* Dos planchas de un mismo pliego, no dos tarjetas gemelas: anchos distintos,
   sin caja ni suelo propio, y la portada real del tomo que cada una abre. El
   texto se apoya en un filete, como el resto del sistema. */
.tomos {
  display: grid;
  gap: clamp(28px, 3.5vw, 52px);
}

@media (min-width: 760px) {
  .tomos {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(24px, 3vw, 48px);
    align-items: start;
  }
}

.tomo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
}

.tomo__lamina {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--grafito);
}

.tomo__lamina img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 900ms var(--sal);
}

.tomo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--filete-claro);
  transition: border-color var(--d-panel) var(--sal-ui);
}

.tomo__dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
}

.tomo__paginas {
  color: var(--papel-tenue);
  font-variant-numeric: tabular-nums;
}

.tomo__titulo {
  font-size: var(--t-titular);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.026em;
  color: var(--papel);
  text-wrap: balance;
}

.tomo__texto {
  font-size: var(--t-cuerpo);
  color: var(--papel-suave);
  max-width: 44ch;
  text-wrap: pretty;
}

.tomo__enlace {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel);
}

.tomo__enlace::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0.5);
  transform-origin: 0 50%;
  transition: transform var(--d-panel) var(--sal-ui);
}

@media (hover: hover) and (pointer: fine) {
  .tomo:hover .tomo__lamina img {
    transform: scale(1.04);
  }

  .tomo:hover .tomo__cuerpo {
    border-color: var(--oro);
  }

  .tomo:hover .tomo__enlace::after {
    transform: scaleX(1);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   VII · RAIL de obra construida
   ═════════════════════════════════════════════════════════════════════════ */

.rail-zona {
  /* Alto común de la tira: las piezas varían de ancho, nunca de alto, así los
     pies de foto comparten una sola línea de base a lo largo del rail. */
  --rail-alto: clamp(260px, 42svh, 480px);
  --rail-margen: max(var(--margen), calc(50vw - var(--ancho-max) / 2));
  margin-top: clamp(34px, 4vw, 58px);
}

.rail {
  display: flex;
  gap: clamp(12px, 1.6vw, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-inline: var(--rail-margen);
  /* Sin esto el anclaje pega la primera pieza al borde del viewport y se come
     el margen izquierdo de la rejilla. */
  scroll-padding-inline: var(--rail-margen);
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .rail {
    cursor: grab;
  }

  .rail[data-arrastrando] {
    cursor: grabbing;
    scroll-snap-type: none;
  }

  .rail[data-arrastrando] .rail__pieza {
    pointer-events: none;
  }
}

.rail__pieza {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: min(86vw, calc(var(--rail-alto) * 1.5));
  scroll-snap-align: start;
}

.rail__pieza--alta {
  width: min(64vw, calc(var(--rail-alto) * 0.75));
}

.rail__pieza picture {
  display: block;
  height: var(--rail-alto);
  overflow: hidden;
  background: var(--grafito);
}

.rail__pieza img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.rail__progreso {
  position: relative;
  height: 1px;
  margin: clamp(22px, 2.6vw, 32px) var(--rail-margen) 0;
  background: var(--filete-claro);
}

.rail__progreso::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oro);
  transform: scaleX(var(--avance, 0.18));
  transform-origin: 0 50%;
  transition: transform 120ms linear;
}

.rail__ayuda {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px var(--rail-margen) var(--aire-capitulo);
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-tenue);
}

.rail__ayuda svg {
  width: 26px;
  height: 8px;
  fill: none;
  stroke: var(--oro);
  stroke-width: 1.2;
  animation: deslizar 2600ms var(--vaiven) infinite;
}

@keyframes deslizar {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(7px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIII · CONTACTO
   ═════════════════════════════════════════════════════════════════════════ */

.barra-whatsapp {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px clamp(18px, 3vw, 40px);
  margin-top: clamp(8px, 1.4vw, 16px);
  padding: clamp(24px, 3vw, 34px) clamp(26px, 3.2vw, 44px);
  border-radius: var(--radio-accion);
  background: var(--oro);
  color: var(--carbon);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-pulsacion) var(--sal-ui);
}

.barra-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--oro-vivo);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 420ms var(--sal-ui);
}

.barra-whatsapp:active {
  transform: scale(0.988);
}

@media (min-width: 600px) {
  .barra-whatsapp {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
}

.barra-whatsapp__texto {
  font-size: var(--t-subtitulo);
  font-weight: 660;
  line-height: 1.08;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.barra-whatsapp__numero {
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.barra-whatsapp__flecha {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  width: 30px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform var(--d-panel) var(--sal-ui);
}

@media (min-width: 600px) {
  .barra-whatsapp__flecha {
    grid-column: 3;
  }
}

@media (hover: hover) and (pointer: fine) {
  .barra-whatsapp:hover::before {
    clip-path: inset(0 0 0 0);
  }

  .barra-whatsapp:hover .barra-whatsapp__flecha {
    transform: translateX(8px);
  }
}

.vias {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.colofon-contacto {
  display: grid;
  gap: clamp(20px, 2.4vw, 30px);
  margin-top: clamp(14px, 2vw, 24px);
}

@media (min-width: 560px) {
  .colofon-contacto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .colofon-contacto {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.colofon-contacto__celda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--filete-claro);
}

.colofon-contacto__celda dt {
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-tenue);
}

.colofon-contacto__celda dd {
  font-size: var(--t-menor);
  color: var(--papel);
  line-height: 1.5;
}

.colofon-contacto__celda a {
  position: relative;
  transition: color var(--d-ui) var(--sal-ui);
}

.colofon-contacto__celda a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-ui) var(--sal-ui);
}

@media (hover: hover) and (pointer: fine) {
  .colofon-contacto__celda a:hover {
    color: var(--oro);
  }

  .colofon-contacto__celda a:hover::after {
    transform: scaleX(1);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PIE
   ═════════════════════════════════════════════════════════════════════════ */

.pie {
  background: var(--carbon);
  border-top: 1px solid var(--filete-claro);
  padding-bottom: calc(env(safe-area-inset-bottom) + 96px);
}

@media (min-width: 900px) {
  .pie {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.pie__interior {
  padding-block: clamp(56px, 7vw, 100px) clamp(36px, 4vw, 56px);
  row-gap: clamp(36px, 4vw, 56px);
}

.pie__marca {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pie__logo {
  width: clamp(150px, 20vw, 210px);
  height: auto;
}

.pie__texto {
  font-size: var(--t-menor);
  color: var(--papel-tenue);
  max-width: 44ch;
  text-wrap: pretty;
}

.pie__columna {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie__columna a,
.pie__columna span {
  font-size: var(--t-menor);
  color: var(--papel-suave);
  transition: color var(--d-ui) var(--sal-ui);
}

@media (hover: hover) and (pointer: fine) {
  .pie__columna a:hover {
    color: var(--oro);
  }
}

.pie__rotulo {
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--papel-tenue);
  margin-bottom: 6px;
}

.pie__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--filete-claro);
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--papel-tenue);
}

@media (min-width: 700px) {
  .pie__marca {
    grid-column: 1 / span 4;
  }

  .pie__columna:nth-of-type(1) {
    grid-column: 6 / span 3;
  }

  .pie__columna:nth-of-type(2) {
    grid-column: 9 / span 4;
  }
}

@media (min-width: 700px) and (max-width: 899px) {
  .pie__marca {
    grid-column: 1 / span 8;
  }

  .pie__columna:nth-of-type(1) {
    grid-column: 1 / span 4;
  }

  .pie__columna:nth-of-type(2) {
    grid-column: 5 / span 4;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ACCIÓN PERSISTENTE
   ═════════════════════════════════════════════════════════════════════════ */

.persistente-zona {
  position: fixed;
  z-index: 50;
  inset: auto 0 0;
  padding: 0 0 env(safe-area-inset-bottom);
  pointer-events: none;
}

@media (min-width: 900px) {
  .persistente-zona {
    inset: auto var(--margen) clamp(24px, 3vw, 40px) auto;
    padding: 0;
  }
}

.persistente {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 0 24px;
  background: var(--oro);
  color: var(--carbon);
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translate3d(0, 110%, 0);
  transition: opacity var(--d-panel) var(--sal-ui), transform 420ms var(--sal);
}

.persistente[data-dentro] {
  opacity: 1;
  transform: none;
}

.persistente:active {
  transform: scale(0.97);
}

.persistente__icono {
  width: 19px;
  height: 19px;
  fill: currentColor;
  flex: 0 0 auto;
}

@media (min-width: 900px) {
  .persistente {
    width: auto;
    min-height: 54px;
    padding: 0 26px;
    border-radius: var(--radio-accion);
    box-shadow: var(--sombra-flotante);
    transform: translate3d(0, 24px, 0) scale(0.96);
  }

  .persistente[data-dentro] {
    transform: none;
  }
}

@media (hover: hover) and (pointer: fine) {
  .persistente:hover {
    background: var(--oro-vivo);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTAFOLIOS
   ═════════════════════════════════════════════════════════════════════════ */

.cuerpo-portafolio {
  background: var(--carbon);
}

.portafolio__apertura {
  position: relative;
  background: var(--carbon);
  border-bottom: 1px solid var(--filete-claro);
}

.portafolio__apertura .capitulo__interior {
  padding-block: calc(var(--masthead-h) + var(--masthead-sep) + clamp(56px, 8vw, 104px))
    clamp(36px, 4vw, 56px);
}

.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--filete-claro);
  border-radius: var(--radio-accion);
  width: fit-content;
  max-width: 100%;
}

.pestana {
  min-height: 44px;
  padding: 0 clamp(18px, 2.4vw, 28px);
  border-radius: var(--radio-accion);
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--papel-tenue);
  transition: background-color var(--d-ui) var(--sal-ui), color var(--d-ui) var(--sal-ui),
    transform var(--d-pulsacion) var(--sal-ui);
}

.pestana:active {
  transform: scale(0.97);
}

.pestana[data-activa] {
  background: var(--oro);
  color: var(--carbon);
}

@media (hover: hover) and (pointer: fine) {
  .pestana:not([data-activa]):hover {
    color: var(--papel);
    background: rgba(245, 242, 234, 0.07);
  }
}

.tomo-lectura {
  display: grid;
  /* minmax(0, ...) y no `auto`: el índice es un contenedor de desplazamiento
     horizontal y su tamaño max-content arrastraría toda la tira de secciones,
     desbordando la página en teléfono. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1000px) {
  .tomo-lectura {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  }
}

.indice-portafolio {
  min-width: 0;
  position: sticky;
  top: calc(var(--masthead-h) + var(--masthead-sep) * 2);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px var(--margen);
  background: rgba(13, 15, 16, 0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--filete-claro);
}

@media (min-width: 1000px) {
  .indice-portafolio {
    top: 0;
    height: 100svh;
    padding: calc(var(--masthead-h) + var(--masthead-sep) * 2 + 24px) 24px 24px var(--margen);
    border-bottom: 0;
    border-right: 1px solid var(--filete-claro);
    overflow-y: auto;
    background: var(--carbon);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.indice-portafolio__cabeza {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.indice-portafolio__rotulo {
  font-size: var(--t-folio);
  font-weight: 560;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--oro);
}

.indice-portafolio__titulo {
  font-size: var(--t-subtitulo);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.026em;
  color: var(--papel);
}

.indice-portafolio__meta {
  font-size: var(--t-folio);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--papel-tenue);
  font-variant-numeric: tabular-nums;
}

.indice-portafolio__nav {
  display: flex;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.indice-portafolio__nav::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1000px) {
  .indice-portafolio__nav {
    flex-direction: column;
    gap: 0;
    overflow-x: visible;
    margin-top: 6px;
  }
}

.indice-portafolio__enlace {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: 1px solid var(--filete-claro);
  border-radius: var(--radio-accion);
  font-size: var(--t-folio-min);
  font-weight: 560;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--papel-tenue);
  transition: color var(--d-ui) var(--sal-ui), border-color var(--d-ui) var(--sal-ui),
    background-color var(--d-ui) var(--sal-ui);
}

@media (min-width: 1000px) {
  .indice-portafolio__enlace {
    padding: 11px 0 11px 14px;
    border: 0;
    border-top: 1px solid var(--filete-claro);
    border-radius: 0;
    white-space: normal;
    position: relative;
  }

  .indice-portafolio__enlace::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 7px;
    height: 1px;
    background: var(--oro);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--d-ui) var(--sal-ui);
  }

  .indice-portafolio__enlace[data-activo]::before {
    transform: none;
  }
}

.indice-portafolio__enlace[data-activo] {
  color: var(--oro);
  border-color: var(--oro);
}

@media (min-width: 1000px) {
  .indice-portafolio__enlace[data-activo] {
    border-color: var(--filete-claro);
  }
}

@media (hover: hover) and (pointer: fine) {
  .indice-portafolio__enlace:hover {
    color: var(--papel);
  }
}

.indice-portafolio__accion {
  margin-top: auto;
}

@media (max-width: 999px) {
  .indice-portafolio__accion {
    display: none;
  }
}

.visor {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(20px, 3vw, 40px) var(--margen) clamp(56px, 7vw, 96px);
  min-width: 0;
}

.hoja {
  position: relative;
  background: var(--grafito);
  scroll-margin-top: calc(var(--masthead-h) + var(--masthead-sep) * 2 + 120px);
}

@media (min-width: 1000px) {
  .hoja {
    scroll-margin-top: calc(var(--masthead-h) + var(--masthead-sep) * 2 + 24px);
  }
}

.hoja img {
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 520ms var(--sal-ui);
}

.hoja img.es-cargada {
  opacity: 1;
}

.hoja__folio {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 5px 11px;
  border-radius: var(--radio-accion);
  background: rgba(13, 15, 16, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: var(--t-folio-min);
  font-weight: 560;
  letter-spacing: 0.14em;
  color: var(--papel-tenue);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO
   ═════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] [data-rev],
  .js [data-reveal] [data-rev-filete],
  .js [data-reveal] .alza__int {
    opacity: 1;
    transform: none;
  }

  .portada__lamina,
  .plancha__lamina {
    transform: none !important;
  }

  .portada__lamina img {
    transform: none;
  }

  .js .portada .portada__titulo {
    font-weight: 700;
  }

  .persistente {
    opacity: 1;
    transform: none;
  }

  .persistente:not([data-dentro]) {
    opacity: 0;
    pointer-events: none;
  }
}