/* fraqtal · v7 · Hoja normalizada.
   Hoja blanca continua, títulos y lectura en Albert Sans; logo en EB Garamond.
   La tinta del logo dibuja todo; el lacre marca la excepción y la acción principal. Azul solo en el distintivo verificado.
   Sin sombras. La tarjeta de tweet es el único contenedor con radio. */

@font-face { font-family: "Albert Sans"; src: url("fonts/albert-sans-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("fonts/eb-garamond-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --hoja: #FFFFFF;
  --tinta: #1C1B19;
  --tinta-2: #5B5E66;
  --eje: #8E9198;
  --guia: #D5D8DC;
  --lacre: #8B2E1F;

  --texto: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --logo: "EB Garamond", Garamond, serif;

  /* Grosores ISO 128 llevados a pantalla */
  --fina: 1px;
  --media: 1.5px;
  --gruesa: 2px;

  --interior: clamp(18px, 4.2vw, 72px);    /* borde de franja → contenido */
  --ancho: 1200px;
  --seccion: clamp(5.5rem, 3.5rem + 6vw, 10rem);
  --pila: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);

  --t-h1: clamp(2.5rem, 1.35rem + 3.9vw, 4.5rem);    /* 40 → 72 px */
  --t-h2: clamp(1.9rem, 1.25rem + 2.2vw, 3.125rem);  /* 30 → 50 px */
  --t-h3: 1.5rem;                                    /* 24 px */
  --t-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --t-body: 1.0625rem;                               /* 17 px */
  --t-small: 0.9375rem;                              /* 15 px */
  --t-campo: 0.8125rem;                              /* 13 px: nombres de campo */

  --sale: cubic-bezier(0.16, 1, 0.3, 1);
  /* Masa 1, rigidez 350 y amortiguación 40. */
  --spring: linear(0, 0.08 2.5%, 0.23 5%, 0.4 7.5%, 0.535 10%, 0.74 15%, 0.859 20%, 0.928 25%, 0.961 30%, 0.98 35%, 0.989 40%, 0.997 50%, 0.9992 60%, 0.9998 70%, 0.99994 80%, 0.99999 90%, 1 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-color: var(--tinta) var(--hoja); accent-color: var(--lacre); }
body {
  position: relative; min-height: 100vh;
  background: var(--hoja); color: var(--tinta);
  font-family: var(--texto); font-size: var(--t-body); font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--lacre); color: var(--hoja); }
a { color: inherit; }
ol, ul { list-style: none; }
svg { display: block; }
h1 { font-weight: 350; }
h2, h3 { font-weight: 500; }
strong { font-weight: 600; }
:focus-visible { outline: var(--gruesa) solid var(--lacre); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; z-index: 10; left: var(--interior); top: 0; transform: translateY(-120%); padding: 10px 16px; background: var(--tinta); color: var(--hoja); text-decoration: none; }
.saltar:focus { transform: none; }

/* Contenedor continuo, sin marco exterior */
.hoja { position: relative; min-height: 100vh; }

.franja { width: 100%; max-width: calc(var(--ancho) + 2 * var(--interior)); margin-inline: auto; padding-inline: var(--interior); }

/* Cabecera: logo e índice de la hoja */
.cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: clamp(14px, 1.2vw, 20px) var(--interior); border-bottom: var(--fina) solid var(--tinta); }
.wordmark { display: inline-flex; align-items: baseline; white-space: nowrap; text-decoration: none; }
.wordmark .name { font-family: var(--logo); font-weight: 400; font-size: 32px; line-height: 1; letter-spacing: -0.005em; color: var(--tinta); }
.q { color: var(--lacre); font-style: normal; display: inline-block; transform-origin: 50% 70%; will-change: transform; animation: q-grow 3s 1 forwards; }
/* Intro única: la q crece por octavas, gira una vez y queda entera (scale 1, sin rotación). shatter-q.js la apaga al terminar. */
@keyframes q-grow {
  0%      { transform: scale(0.03125) rotateY(0deg);   animation-timing-function: step-end; }
  11.667% { transform: scale(0.0625)  rotateY(0deg);   animation-timing-function: step-end; }
  23.333% { transform: scale(0.125)   rotateY(0deg);   animation-timing-function: step-end; }
  35%     { transform: scale(0.25)    rotateY(0deg);   animation-timing-function: step-end; }
  46.667% { transform: scale(0.5)     rotateY(0deg);   animation-timing-function: step-end; }
  58.333% { transform: scale(1)       rotateY(0deg);   animation-timing-function: step-end; }
  70%     { transform: scale(1)       rotateY(0deg);   animation-timing-function: ease-in-out; }
  100%    { transform: scale(1)       rotateY(360deg); }
}
.q.q-intro-hecha { animation: none; transform: none; }
.indice { display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 15px; }
.indice a { color: var(--tinta-2); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: color 120ms ease-out; }
.indice a:hover { color: var(--tinta); text-decoration-line: underline; }

/* Portada: título, acción y figura 1:√2 a la derecha */
.portada { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 80px); align-items: stretch; padding-top: clamp(32px, 1rem + 2vw, 64px); padding-bottom: clamp(24px, 0.5rem + 1.5vw, 40px); }
h1 { font-family: var(--texto); font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.02em; max-width: 12.5em; text-wrap: balance; }
h1 strong { font-weight: 650; }
.bajada { margin-top: clamp(20px, 1rem + 0.8vw, 30px); max-width: 33rem; font-size: var(--t-lead); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.acciones { margin-top: clamp(28px, 1.5rem + 1vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.boton {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px;
  background: var(--lacre); color: var(--hoja); text-decoration: none;
  font-family: var(--texto); font-weight: 560; font-size: 16px; line-height: 1.2; letter-spacing: 0;
  transform: translate3d(var(--pull-x, 0px), var(--pull-y, 0px), 0);
  transition: background-color 140ms ease-out, transform 300ms var(--spring);
}
.boton:hover { background: var(--tinta); }
.boton:active { transform: translateY(1px); }

.escala-marco { align-self: stretch; justify-self: end; display: flex; justify-content: flex-end; width: min(100%, 390px); min-height: 0; }
.escala-caja { position: relative; flex: none; height: 100%; width: auto; aspect-ratio: 600 / 848; min-height: 0; }
.escala { position: relative; width: 100%; height: 100%; aspect-ratio: 600 / 848; }
.escala-static, .escala-static-h, .escala hyperframes-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.escala-static-h { display: none; }
.escala hyperframes-player { background: transparent; opacity: 0; transition: opacity 360ms var(--sale); }
.escala.live hyperframes-player { opacity: 1; }
/* Slideshow de ideas: cada tarjeta muestra una versión del tweet */
.experiencia { padding-block: clamp(28px, 4vw, 56px); border-block: var(--fina) solid var(--tinta); }
.ideas-cabecera { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.ideas-cabecera h2 { max-width: 22em; font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2rem); }
.ideas-controles { display: flex; flex: none; gap: 8px; }
.ideas-controles button { display: grid; place-items: center; width: 44px; height: 44px; border: var(--fina) solid var(--tinta); background: var(--hoja); color: var(--tinta); cursor: pointer; transition: background-color 140ms ease-out, color 140ms ease-out; }
.ideas-controles button:hover:not(:disabled) { background: var(--tinta); color: var(--hoja); }
.ideas-controles button:disabled { color: var(--tinta-2); opacity: 0.55; }
.ideas-controles svg { width: 22px; height: 22px; }
.ideas-controles path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.ideas-ventana { margin-top: var(--pila); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.ideas-ventana::-webkit-scrollbar { display: none; }
.ideas-lista { display: grid; grid-auto-flow: column; grid-auto-columns: min(32rem, calc(100vw - var(--interior) - var(--interior))); gap: clamp(18px, 2vw, 28px); width: max-content; }
.idea-slot { min-width: 0; align-self: start; scroll-snap-align: start; scroll-snap-stop: always; }
/* Tarjeta de tweet: port estático de MagicUI TweetCard (MIT) */
.idea { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 32rem; height: fit-content; overflow: hidden; border: 1px solid var(--guia); border-radius: 12px; padding: 20px; background: var(--hoja); color: var(--tinta); }
.idea-autor { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.idea-autor-grupo { display: flex; flex: 1; align-items: flex-start; gap: 12px; min-width: 0; }
.idea-avatar { display: block; flex: none; width: 48px; height: 48px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--guia) 50%, transparent); border-radius: 50%; }
.idea-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.idea-identidad { min-width: 0; }
.idea-identidad h3 { display: flex; align-items: center; gap: 4px; min-width: 0; font-family: var(--texto); font-size: 16px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.idea-identidad h3 a { overflow: hidden; color: var(--tinta); text-overflow: ellipsis; text-decoration: none; transition: opacity 150ms ease-out; }
.idea-identidad h3 a:hover { opacity: 0.8; }
.idea-verificado { flex: none; width: 16px; height: 16px; color: #3B82F6; }
.idea-handle { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--tinta-2); font-size: 14px; line-height: 1.3; white-space: nowrap; }
.idea-handle a { color: var(--tinta-2); text-decoration: none; transition: color 150ms ease-out; }
.idea-handle a:hover, .idea-tweet:hover { color: var(--tinta); }
.idea-tweet { display: block; flex: none; width: 20px; height: 20px; color: var(--tinta-2); transition: color 150ms ease-out; }
.idea-tweet svg { width: 20px; height: 20px; }
.idea-contenido { min-width: 0; }
.idea-version { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.idea-version[hidden] { display: none !important; }
.idea-version [lang] { width: 100%; font-family: var(--texto); font-size: 15px; font-weight: 400; line-height: 1.625; letter-spacing: 0; overflow-wrap: anywhere; white-space: pre-line; }
.idea-etiqueta { color: var(--tinta-2); font-family: var(--texto); font-size: 13px; line-height: 1.25; }
.idea a:focus-visible { outline: var(--gruesa) solid var(--lacre); outline-offset: 3px; }

/* Secciones: separadas por una línea de eje (raya-punto) del propio plano */
.seccion { position: relative; margin-top: var(--seccion); }
.seccion::before {
  content: ""; position: absolute; left: var(--interior); right: var(--interior); top: calc(var(--seccion) / -2); height: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='37' height='1'%3E%3Cpath d='M0 .5h22M28 .5h3' stroke='%238E9198'/%3E%3C/svg%3E") left center / 37px 1px repeat-x;
}
h2 { font-family: var(--texto); font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.01em; max-width: 18em; text-wrap: balance; }
h3 { font-family: var(--texto); font-size: var(--t-h3); line-height: 1.2; }
.lead { margin-top: clamp(16px, 0.75rem + 0.6vw, 24px); max-width: 38rem; font-size: var(--t-lead); line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
#garantia .lead { color: var(--tinta); }

/* Para quién: tabla de aplicación en dos columnas */
.encaje { margin-top: var(--pila); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.encaje-col { min-width: 0; }
.encaje ul { margin-top: 14px; }
.encaje li { max-width: 34rem; padding: 14px 0; text-wrap: pretty; }

/* Diagnóstico: lista de piezas del plano */
.piezas { margin-top: var(--pila); border: var(--gruesa) solid var(--tinta); }
.piezas-cabeza, .piezas-lista li { display: grid; grid-template-columns: 4.5rem minmax(11rem, 16rem) minmax(0, 1fr) 9rem; }
.piezas-cabeza { border-bottom: var(--gruesa) solid var(--tinta); font-family: var(--texto); font-size: var(--t-campo); font-weight: 500; color: var(--tinta-2); }
.piezas-cabeza span { padding: 10px 16px; }
.piezas-cabeza span + span, .piezas-lista li > * + * { border-left: var(--fina) solid var(--tinta); }
.piezas-lista li + li { border-top: var(--fina) solid var(--tinta); }
.piezas-lista li > * { padding: 18px 16px; }
.piezas-lista h3 { font-size: 1.375rem; }
.piezas-lista p { max-width: 50ch; color: var(--tinta-2); text-wrap: pretty; }
.formato { font-size: var(--t-small); }
.globo { display: inline-grid; place-items: center; width: 34px; height: 34px; border: var(--media) solid var(--tinta); border-radius: 50%; font-family: var(--texto); font-size: 16px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; transition: background-color 120ms ease-out, color 120ms ease-out; }
.piezas-lista li:hover .globo { background: var(--tinta); color: var(--hoja); }
[id] { scroll-margin-top: 28px; }

/* Método: cuatro vistas del mismo tamaño dibujado, con hojas de siguiente nivel */
.vistas { margin-top: var(--pila); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); perspective: 1200px; }
.vista-dibujo { width: 100%; height: auto; overflow: visible; }
.v-trazo { fill: none; stroke: var(--tinta); stroke-width: 1.4; }
.v-sub { stroke: var(--lacre); stroke-width: 1.1; vector-effect: non-scaling-stroke; transition: stroke 600ms var(--spring); }
.v-lider, .v-ref { stroke: var(--tinta-2); stroke-width: 1; }
.v-globo { fill: var(--lacre); stroke: var(--lacre); stroke-width: 1.2; transition: fill 600ms var(--spring), stroke 600ms var(--spring); }
.v-num { font-family: var(--texto); font-size: 14px; font-weight: 500; text-anchor: middle; fill: var(--hoja); transition: fill 600ms var(--spring); }
.v-relleno { fill: var(--lacre); }
.vista h3 { margin-top: 14px; }
.vista > p:last-child { margin-top: 8px; font-size: var(--t-small); line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.practica { margin-top: var(--pila); max-width: 66rem; }
.practica p { max-width: 38rem; text-wrap: pretty; }

/* Trazo de plotter: solo si la sección está fuera de pantalla al cargar (motion.js) */
.js .vistas.por-trazar .v-trazo { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .vistas.por-trazar .v-sub { stroke: var(--tinta-2); }
.js .vistas.por-trazar .v-globo { fill: var(--hoja); stroke: var(--tinta); }
.js .vistas.por-trazar .v-num { fill: var(--tinta); }
.js .vistas.por-trazar .v-relleno { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
.js .vistas.por-trazar.trazando .v-trazo { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--spring) var(--d, 0ms); }
.js .vistas.por-trazar.trazando .v-relleno { transform: none; transition: transform 650ms var(--spring) var(--d, 0ms); }
.vista:nth-child(1) .v-marco { --d: 0ms; }    .vista:nth-child(1) .v-sub { --d: 280ms; }  .vista:nth-child(1) .v-globo { --d: 520ms; }  .vista:nth-child(1) .v-ref, .vista:nth-child(1) .v-lider { --d: 700ms; }
.vista:nth-child(2) .v-marco { --d: 820ms; }  .vista:nth-child(2) .v-sub { --d: 1100ms; } .vista:nth-child(2) .v-globo { --d: 1340ms; } .vista:nth-child(2) .v-ref, .vista:nth-child(2) .v-lider { --d: 1520ms; }
.vista:nth-child(3) .v-marco { --d: 1640ms; } .vista:nth-child(3) .v-sub { --d: 1920ms; } .vista:nth-child(3) .v-globo { --d: 2160ms; } .vista:nth-child(3) .v-ref, .vista:nth-child(3) .v-lider { --d: 2340ms; }
.vista:nth-child(4) .v-marco { --d: 2460ms; } .vista:nth-child(4) .v-relleno { --d: 2780ms; }

.js .vistas.por-trazar .v-sub,
.js .vistas.por-trazar .v-globo,
.js .vistas.por-trazar .v-num { transition: stroke 600ms var(--spring), fill 600ms var(--spring); }
.js .vistas.por-trazar .criterio-presente .v-sub { stroke: var(--lacre); }
.js .vistas.por-trazar .criterio-presente .v-globo { fill: var(--lacre); stroke: var(--lacre); }
.js .vistas.por-trazar .criterio-presente .v-num { fill: var(--hoja); }
.js .vistas.por-trazar:not(.trazando) .v-sub,
.js .vistas.por-trazar:not(.trazando) .v-globo,
.js .vistas.por-trazar:not(.trazando) .v-num { transition: none; }
.js .vistas.por-trazar.trazando .criterio-presente .v-sub { transition: stroke 600ms var(--spring); }
.js .vistas.por-trazar.trazando .criterio-presente .v-globo { transition: fill 600ms var(--spring), stroke 600ms var(--spring); }
.js .vistas.por-trazar.trazando .criterio-presente .v-num { transition: fill 600ms var(--spring); }
.vista { transform-style: preserve-3d; }

/* Contacto: secuencia de pasos con línea de referencia y flecha */
.pasos { margin-top: var(--pila); display: flex; flex-wrap: wrap; align-items: center; row-gap: 14px; }
.pasos li { display: flex; align-items: center; gap: 12px; font-size: var(--t-lead); }
.pasos li + li::before {
  content: ""; flex: none; width: clamp(32px, 4vw, 64px); height: 9px; margin: 0 16px;
  background:
    linear-gradient(var(--tinta), var(--tinta)) left center / calc(100% - 2px) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 9'%3E%3Cpath d='M0 0.8 L10 4.5 L0 8.2 Z' fill='%231C1B19'/%3E%3C/svg%3E") right center / 10px 9px no-repeat;
}
.aviso { margin-top: 22px; max-width: 40rem; font-size: var(--t-small); color: var(--tinta-2); }
#contacto .acciones { margin-top: clamp(28px, 1.5rem + 1vw, 40px); }
.alt { font-size: var(--t-small); color: var(--tinta-2); }
.link { color: var(--lacre); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.link:hover { color: var(--tinta); }

/* Pie: invitación, acción, wordmark y datos */
.pie {
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(3rem, 7vw, 7rem);
  width: 100%; max-width: none; min-height: 65rem;
  margin: var(--seccion) 0 0; padding: clamp(18px, 2.1vw, 30px);
}
.pie .pie-wordmark .name { font-size: clamp(7rem, 13vw, 13rem); }
.pie .q { animation: none; transform: none; will-change: auto; }
.pie-centro { align-self: stretch; }
.pie-invitacion { font-family: var(--texto); font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 500; line-height: 1.15; }
.pie-invitacion a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.pie-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; min-height: 113px; margin-top: clamp(24px, 3vw, 42px); padding: 22px 26px;
  background: var(--lacre); color: var(--hoja); text-decoration: none;
  font-family: var(--texto); font-size: clamp(1.25rem, 3vw, 2.5rem); font-weight: 560; line-height: 1.1;
  transform: translate3d(var(--pull-x, 0px), var(--pull-y, 0px), 0);
  transition: transform 300ms var(--spring);
}
.pie-cta-roll { display: grid; overflow: hidden; }
.pie-cta-roll > span { grid-area: 1 / 1; transition: transform 700ms cubic-bezier(0.19, 1, 0.22, 1); }
.pie-cta-roll > span:nth-child(2) { transform: translateY(110%); }
.pie-cta:hover .pie-cta-roll > span:first-child,
.pie-cta:focus-visible .pie-cta-roll > span:first-child { transform: translateY(-110%); }
.pie-cta:hover .pie-cta-roll > span:nth-child(2),
.pie-cta:focus-visible .pie-cta-roll > span:nth-child(2) { transform: translateY(0); }
.pie-cta-texto { min-width: 0; }
.pie-cta-flecha { flex: none; width: clamp(38px, 4vw, 56px); height: clamp(38px, 4vw, 56px); }
.pie-cta-flecha > span { display: block; width: 100%; height: 100%; }
.pie-cta-flecha svg { width: 100%; height: 100%; }
.pie-cta-flecha path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.pie-cta:focus-visible { outline: 3px solid var(--tinta); outline-offset: 5px; }
.pie-inferior {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(15rem, 1.2fr) auto;
  align-items: end; gap: 20px; font-size: 1rem; font-weight: 600; line-height: 1.35;
}
.pie-indice { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pie-indice a { text-decoration: none; }
.pie-indice a:hover { color: var(--lacre); text-decoration: underline; text-underline-offset: 0.22em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ideas-ventana { scroll-behavior: auto; }
  .q { animation: none; transform: none; }
  .q-shards { display: none; }
  .boton, .pie-cta { transition: none; transform: none; }
  .vistas, .vistas * { animation: none !important; transition: none !important; }
  .indice a, .globo, .ideas-controles button { transition: none; }
  .pie-cta-roll > span { transition: none; transform: none !important; }
  .pie-cta-roll > span:nth-child(2) { display: none; }
}

@media (max-width: 1080px) {
  .vistas { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; max-width: 44rem; }
  .v-ref { display: none; }
}
@media (max-width: 860px) {
  .portada { grid-template-columns: minmax(0, 1fr); }
  .escala-marco { align-self: start; justify-self: start; display: block; width: min(100%, 360px); height: auto; }
  .escala-caja { width: 100%; height: auto; aspect-ratio: 600 / 848; }
  .escala { height: auto; aspect-ratio: 600 / 848; }
  .piezas-cabeza { display: none; }
  .piezas-lista li { grid-template-columns: 3.75rem minmax(0, 1fr); }
  .piezas-lista li > * + * { border-left: 0; }
  .piezas-lista .pos { grid-row: span 3; border-right: var(--fina) solid var(--tinta); padding: 16px 12px; }
  .piezas-lista h3 { padding: 16px 16px 0; }
  .piezas-lista p { padding: 6px 16px 0; }
  .piezas-lista .formato { padding: 6px 16px 16px; color: var(--tinta-2); }
  .practica { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .wordmark .name { font-size: 26px; }
  .indice { display: none; }
  .escala-marco { width: 100%; }
  .escala-caja { width: 100%; height: auto; aspect-ratio: 848 / 600; }
  .escala { width: 100%; height: auto; aspect-ratio: 848 / 600; }
  .escala-static { display: none; }
  .escala-static-h { display: block; }
  .escala-caja { padding: 0; }
  .v-num { font-size: 18px; }
  .vistas { gap: 40px 18px; }
  .pasos { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pasos li + li::before { content: none; }
  .pie { min-height: 0; }
  .pie .pie-wordmark .name { font-size: clamp(6rem, 22vw, 7rem); }
  .pie-inferior { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pie-indice { gap: 4px 12px; }
}

/* Fragmentos de la q del logo, en la cabecera y el pie. Los arma site/shatter-q.js. */
.q[data-shatter] { position: relative; }
.q[data-shatter="assemble"],
.q[data-shatter="crack"],
.q[data-shatter="shatter"] { color: transparent; }
.cabecera .wordmark .q[data-shatter]:not([data-shatter="idle"]) { animation: none; transform: none; }
.q-shards { position: absolute; inset: -.35em -.2em; pointer-events: none; }
.q-shard { position: absolute; inset: 0; display: block; padding: .35em .2em; color: var(--lacre); font: inherit; line-height: inherit; letter-spacing: inherit; backface-visibility: visible; }
.q-shard.dorso { color: var(--tinta); }