/* ============================================================
   TRAZO — Estilos por sección, en el mismo orden del HTML.
   ============================================================ */

/* ============================================================
   1. HERO — composición asimétrica con fotografía a sangre
   ============================================================ */
.hero {
  position: relative;
  /* La fotografía sangra hasta el borde de pantalla: el recorte vive aquí,
     no en el body, para no romper el scroll de la página. */
  overflow: hidden;
  padding-block: clamp(1.75rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
}

.hero__inner { row-gap: clamp(2rem, 4vw, 3rem); }

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

.hero__saludo {
  display: block;
  margin-bottom: 0.4rem;
  transform: rotate(-1.2deg);
  transform-origin: left center;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: -0.042em;
  line-height: 0.98;
  max-width: 15ch;
}

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

.hero__estado {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  max-width: 28ch;
  margin-top: 2.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linea-media);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--texto-2);
}

.hero__punto {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--lima);
  transform: translateY(-1px);
}

.hero__media {
  position: relative;
  grid-column: 1 / -1;
}

/* Altura acotada en TODOS los anchos. Con aspect-ratio 4/5 a ancho completo de
   columna el hueco llegaba a 973px de alto entre 620 y 899, y el hero pedía
   pantalla y media antes de la primera sección. */
.hero__media .slot__marco {
  aspect-ratio: auto;
  height: clamp(15rem, 40vh, 28rem);
}

/* Nota manuscrita al pie de la fotografía, con flecha hacia ella */
.hero__apunte {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 26ch;
  margin-top: 1rem;
  transform: rotate(-1deg);
  transform-origin: left top;
}

.hero__apunte svg {
  flex: 0 0 auto;
  width: 24px;
  margin-top: 0.15rem;
  color: var(--taupe);
}

@media (min-width: 900px) {
  .hero__head { grid-column: 1 / 9; }
  .hero__cuerpo { grid-column: 1 / 7; align-self: start; margin-top: 0.5rem; }

  /* La fotografía sale del contenedor por la derecha: recorte editorial */
  .hero__media {
    grid-column: 8 / -1;
    margin-right: calc(var(--gutter) * -1);
    margin-top: clamp(-6rem, -5vw, -2.5rem);
  }

   .hero__media .slot__marco { border-radius: var(--radio-lg) 0 0 var(--radio-lg); }

  .hero__apunte { padding-left: 0.25rem; }
}

@media (min-width: 1240px) {
  .hero__media { margin-right: calc((100vw - var(--ancho-max)) / -2 - var(--gutter)); }
}

/* ============================================================
   2. PROBLEMA — recortes y notas
   ============================================================ */
.section--problema { position: relative; }

.problema__intro { grid-column: 1 / -1; }
.problema__texto { grid-column: 1 / -1; margin-top: 1.75rem; }

.recortes {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}

.recorte {
  position: relative;
  padding: 1.6rem 1.5rem 1.4rem;
  background: var(--papel-alto);
  border-radius: var(--radio-lg);
  box-shadow: 0 14px 30px -26px rgb(var(--tinta-rgb) / 0.75);
}

.recorte::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1.5rem;
  width: 42px;
  height: 5px;
  background: var(--lima);
}

.recorte p {
  margin: 0;
  font-size: clamp(1.05rem, 0.9vw + 0.9rem, 1.3rem);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.015em;
}

.recorte__firma {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-firma);
  font-size: 1.15rem;
  color: var(--texto-2);
}

.recorte--a { background: var(--papel-alto); }
.recorte--b { background: rgb(var(--taupe-rgb) / 0.4); }
.recorte--c { background: var(--papel-alto); }

@media (min-width: 768px) {
  .problema__intro { grid-column: 1 / 7; }
  .problema__texto { grid-column: 7 / -1; margin-top: 0.6rem; }
}

/* Franja intermedia: dos columnas. A tres, la medida caía a ~13 caracteres. */
@media (min-width: 620px) and (max-width: 899.98px) {
  .recortes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    align-items: start;
  }
  .recorte--a { transform: rotate(-1.1deg); }
  .recorte--b { transform: rotate(0.7deg) translateY(1.5rem); }
  .recorte--c { transform: rotate(-0.5deg); }

  .section--metodologia .metodologia__retrato .slot__marco { aspect-ratio: 16 / 9; }
}

@media (min-width: 900px) {
  .recortes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    align-items: start;
  }

  /* Escalonado: recortes pegados a mano, no una fila de tarjetas */
  .recorte--a { transform: rotate(-1.1deg); }
  .recorte--b { transform: rotate(0.7deg) translateY(2.25rem); }
  .recorte--c { transform: rotate(-0.5deg) translateY(0.75rem); }
}

/* ============================================================
   3. QUÉ ES TRAZO — palabra a gran escala + entregables
   ============================================================ */
.section--sobre { overflow: hidden; }

.sobre__palabra {
  grid-column: 1 / -1;
  margin: 0 0 0.5rem;
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.06em;
  /* El taupe puro se quedaba en 1,84:1. Su derivado oscuro del sistema sube a
     3,42:1 sin crear color nuevo. Tamano, posicion y tipografia no cambian. */
  color: var(--taupe-texto);
  pointer-events: none;
  user-select: none;
}

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

.sobre__nota {
  grid-column: 1 / -1;
  max-width: 22ch;
  margin-top: 2rem;
}

/* Fotografía de apoyo: ocupa el hueco que deja la nota junto a la lista
   de entregables. Cuadrada, para que dialogue con el tríptico. */
.sobre__foto {
  position: relative;
  grid-column: 1 / -1;
  aspect-ratio: 1 / 1;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  background: var(--taupe);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.entregables {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--linea-media);
}

.entregable {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--linea-media);
}

.entregable__n {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--taupe-texto-sm);
  padding-top: 0.28em;
}

.entregable__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.entregable__text {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--texto-2);
  line-height: 1.62;
}

/* A columna entera el cuadrado medía 676px: más que el hero y que el retrato,
   e invertía la jerarquía. Banda 3/2 con el encuadre algo bajado para que los
   tres vasos sigan completos. */
@media (max-width: 899.98px) {
  .sobre__foto { aspect-ratio: 3 / 2; }
  .foto--azul { object-position: center 58%; }
}

@media (min-width: 900px) {
  /* Composición asimétrica: texto a la izquierda, palabra-recurso y lista
     desplazadas a la derecha. El orden del DOM no cambia. */
  .sobre__intro { grid-column: 1 / 8; grid-row: 1; }

  .sobre__palabra {
    grid-column: 8 / -1;
    grid-row: 1;
    justify-self: end;
    align-self: end;
    margin: 0;
  }

  /* La lista abarca las dos filas de la izquierda: nota arriba, foto debajo. */
  .entregables { grid-column: 5 / -1; grid-row: 2 / 4; margin-top: clamp(2.5rem, 4vw, 4rem); }

  .sobre__foto {
    grid-column: 1 / 5;
    grid-row: 3;
    align-self: start;
    margin-top: clamp(1.5rem, 2.5vw, 2.25rem);
  }

  .sobre__nota {
    grid-column: 1 / 5;
    grid-row: 2;
    align-self: start;
    margin-top: clamp(3.5rem, 5.5vw, 5.5rem);
  }

  .entregable {
    grid-template-columns: 4rem minmax(0, 1fr);
    padding: 1.6rem 0;
  }
}

/* ============================================================
   4. CÓMO FUNCIONA — recorrido unido por un hilo
   ============================================================ */
.section--pasos .section__head { grid-column: 1 / -1; }

.section--pasos .triptico {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- Las cinco piezas de la metodología ----------
   Lista editorial, no diagrama: el nombre a la izquierda, lo que hace a la
   derecha. Mismo patrón que los entregables, que ya estaba aprobado. */
.piezas {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linea-media);
}

.pieza {
  display: grid;
  gap: 0.15rem 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linea-media);
}

.pieza__nombre {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* El verbo va manuscrito: es lo que hace cada pieza, dicho a mano */
.pieza__verbo {
  margin: 0;
  font-family: var(--font-firma);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--taupe-texto-sm);
}

.pieza__texto {
  margin: 0.45rem 0 0;
  max-width: 52ch;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.62;
  color: var(--texto-2);
}

/* La pausa es donde entra el criterio humano: es la pieza que distingue a
   Trazo de una herramienta automática, y se marca. */
.pieza--pausa .pieza__nombre {
  background: linear-gradient(to bottom, transparent 58%, var(--lima) 58% 94%, transparent 94%);
  padding-inline: 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pieza--pausa .pieza__verbo { color: var(--tinta); }

@media (min-width: 768px) {
  .pieza {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    align-items: baseline;
    padding: 1.7rem 0;
  }
  .pieza__verbo { grid-column: 1; }
  .pieza__texto { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

@media (min-width: 1024px) {
  .section--pasos .section__head { grid-column: 1 / 8; }
  .piezas { grid-column: 2 / -1; }
}

/* ============================================================
   5. CONVERSACIÓN — cuaderno de entrevista
   ============================================================ */
.section--conversacion { position: relative; }
.section--conversacion .section__head { grid-column: 1 / -1; }

.cuaderno {
  position: relative;
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--papel-alto);
  border-radius: var(--radio-lg);
  box-shadow: 0 26px 55px -42px rgb(var(--tinta-rgb) / 0.8);
  overflow: hidden;
}

/* Canto del cuaderno */
.cuaderno::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: var(--taupe);
}

.cuaderno__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 1.2rem clamp(1.5rem, 3vw, 2.5rem) 1rem;
  padding-left: clamp(2.1rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--linea-media);
}

.cuaderno__title {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Sello manuscrito: deja claro que es un ejemplo inventado */
.cuaderno__sello {
  margin: 0 0 0 auto;
  font-family: var(--font-firma);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--tinta);
  transform: rotate(-2.5deg);
}
.cuaderno__sello span { background: var(--lima); padding: 0 0.3em; }

.cuaderno__hilo {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-left: clamp(2.1rem, 3.5vw, 3rem);
}

.turno__quien {
  margin: 0 0 0.4rem;
  font-family: var(--font-firma);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--texto-2);
}

.turno__texto { margin: 0; }

/* Trazo pregunta: tipografía mayor, marca de lima al margen */
.turno--trazo { position: relative; padding-left: 1.1rem; }

.turno--trazo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  bottom: 0.2rem;
  width: 4px;
  background: var(--lima);
}

.turno--trazo .turno__quien { color: var(--tinta); }

.turno--trazo .turno__texto {
  font-size: clamp(1.05rem, 0.85vw + 0.9rem, 1.28rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.015em;
  max-width: 48ch;
}

/* La creadora responde en un bloque de papel taupe, desplazado.
   Mismo cuerpo que la pregunta de Trazo: la sección trata de escucharla. */
.turno--persona {
  margin-left: auto;
  /* En rem, no en ch: el `ch` de este bloque se calcularía con el tamaño de
     fuente del contenedor (cuerpo base) y no con el del texto, quedando corto. */
  max-width: 43rem;
  padding: 1.35rem 1.6rem;
  background: rgb(var(--taupe-rgb) / 0.45);
  border-radius: var(--radio);
}

.turno--persona .turno__texto {
  font-size: clamp(1.05rem, 0.85vw + 0.9rem, 1.28rem);
  font-weight: 400;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .cuaderno__hilo,
  .cuaderno__top { padding-inline: clamp(3rem, 5vw, 5rem); }
  .cuaderno__hilo { padding-left: clamp(3.4rem, 5.4vw, 5.5rem); }
  .cuaderno__top { padding-left: clamp(3.4rem, 5.4vw, 5.5rem); }

  /* Rompe el patrón: aquí el titular entra por la derecha y el cuaderno
     ocupa el flanco izquierdo. */
  .section--conversacion .section__head {
    grid-column: 6 / -1;
    justify-self: end;
    text-align: right;
    margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  }
  .section--conversacion .section__head .h2,
  .section--conversacion .section__sub { margin-left: auto; }
  .cuaderno { grid-column: 1 / -1; }
  .section--conversacion .statement { grid-column: 6 / -1; }
}

/* ============================================================
   5.b PRUEBA — demostración guiada de la metodología
   Mismo lenguaje que el cuaderno de la sección anterior: canto taupe,
   papel alto y anotaciones que se acumulan. Nada de burbujas de chat.
   ============================================================ */
.section--prueba .section__head { grid-column: 1 / -1; }

.prueba {
  position: relative;
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--papel-alto);
  border-radius: var(--radio-lg);
  box-shadow: 0 26px 55px -42px rgb(var(--tinta-rgb) / 0.8);
  overflow: hidden;
}

/* Canto del cuaderno, igual que en la conversación de ejemplo */
.prueba::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: var(--taupe);
}

.prueba__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 1.2rem clamp(1.5rem, 3vw, 2.5rem) 1rem;
  padding-left: clamp(2.1rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--linea-media);
}

.prueba__rotulo {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.prueba__paso {
  margin: 0 0 0 auto;
  font-family: var(--font-firma);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--tinta);
  transform: rotate(-2deg);
}

/* Seis trazos que se van cerrando. Es un apoyo: el avance también está
   escrito al lado, así que no es el único medio de saber por dónde vas. */
.marcas {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 6px;
  padding: 1.1rem clamp(1.5rem, 3vw, 2.5rem) 0;
  padding-left: clamp(2.1rem, 3.5vw, 3rem);
  box-sizing: content-box;
}

/* `display: flex` gana al `display: none` que el navegador aplica a
   [hidden]: sin esto las seis marcas se ven vacias antes de empezar y
   otra vez al llegar al resultado. */
.marcas[hidden] { display: none; }

.marcas li {
  width: clamp(16px, 4vw, 34px);
  height: 3px;
  background: var(--taupe-texto);
  transition: height var(--t-suave), background-color var(--t-suave);
}
.marcas li.es-hecho { background: var(--tinta); }
.marcas li.es-actual { background: var(--tinta); height: 6px; }

.prueba__cuerpo {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  padding-left: clamp(2.1rem, 3.5vw, 3rem);
}

/* ---------- Lo ya respondido: anotaciones de cuaderno ---------- */
.anotaciones { display: grid; gap: 1.05rem; }
.anotaciones:not(:empty) { margin-bottom: 2rem; }

.anotacion__p {
  margin: 0 0 0.15rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--texto-3);
}

.anotacion__r {
  margin: 0;
  font-family: var(--font-firma);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--tinta);
}

/* ---------- Turno de Trazo ---------- */
.inicio,
.pregunta,
.escucha {
  position: relative;
  padding-left: 1.1rem;
}

.inicio::before,
.pregunta::before,
.escucha::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  bottom: 0.2rem;
  width: 4px;
  background: var(--lima);
}

.pregunta__quien {
  margin: 0 0 0.4rem;
  font-family: var(--font-firma);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tinta);
}

.inicio__texto,
.pregunta__texto,
.escucha__texto {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(1.05rem, 0.85vw + 0.9rem, 1.28rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

/* Estos párrafos reciben el foco al cambiar de paso: el contorno necesita
   aire para no pegarse al filo del texto. */
.inicio__texto:focus-visible,
.pregunta__texto:focus-visible,
.escucha__texto:focus-visible,
.validacion__r:focus-visible,
.ficha--trazo .ficha__marca:focus-visible { outline-offset: 6px; }

.inicio .btn { margin-top: 1.6rem; }

/* ---------- Respuestas: fichas de cuaderno, no botones de formulario ---------- */
.opciones {
  display: grid;
  max-width: 44rem;
  margin-top: 1.6rem;
  border-top: 1px solid var(--linea-media);
}

.opcion {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 0 0.85rem;
  width: 100%;
  padding: 0.9rem 0.6rem;
  border-bottom: 1px solid var(--linea-media);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  transition: background-color var(--t-suave);
}

/* Pequeño trazo al margen: se alarga y se cierra al apuntar la respuesta */
.opcion__marca {
  width: 14px;
  height: 4px;
  margin-top: 0.62em;
  background: var(--taupe-texto);
  transition: width var(--t-suave), background-color var(--t-suave);
}

.opcion:hover,
.opcion:focus-visible { background: rgb(var(--lima-rgb) / 0.45); }

.opcion:hover .opcion__marca,
.opcion:focus-visible .opcion__marca {
  width: 22px;
  background: var(--tinta);
}

/* ---------- Momento de escucha ---------- */
.senales {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
  margin-top: 1.5rem;
}

.senales li {
  padding-bottom: 0.12em;
  border-bottom: 3px solid var(--lima);
  font-size: clamp(1.15rem, 1.4vw + 0.85rem, 1.7rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  animation: senal-entra 420ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i) * 150ms);
}

@keyframes senal-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Hilo de la conversación ----------
   Reutiliza los turnos del cuaderno de la sección 04: misma regla lima para
   Trazo y mismo bloque de papel taupe para la persona. */
.hilo-vivo {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.hilo-vivo:not(:empty) { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

/* Conversando, lo primero es la pregunta y lo que hay que responder. Lo ya
   hablado baja y se pliega: nadie debería tener que subir para recordar qué
   le están preguntando. */
.prueba.es-conversacion .prueba__cuerpo {
  display: flex;
  flex-direction: column;
}
/* Sólo en una columna. Por encima de 1024 el cuerpo es una rejilla de dos
   pistas (19rem para lo anotado, el resto para la pregunta) y un `order`
   suelto intercambia las pistas: la zona viva se iba a la columna estrecha de
   304 px y el pliegue de una línea se quedaba los 660 px. */
@media (max-width: 1023.98px) {
  .prueba.es-conversacion .prueba__vivo { order: 1; }
  .prueba.es-conversacion .anotaciones  { order: 2; }
}

/* ---------- El momento: la pregunta, grande y pegada a la respuesta ---------- */
.momento {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  /* Al encuadrar la pregunta arriba, la navegación fija se la comería. */
  scroll-margin-top: 5.5rem;
}

/* Lo que Trazo recogió de la última respuesta. Va antes de la pregunta y en
   segundo plano: es la señal de que escuchó, no una pregunta más. */
.momento__eco {
  margin: 0 0 0.75rem;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--texto-2);
  font-style: italic;
}
.momento__eco[hidden] { display: none; }

/* En pantallas muy estrechas y bajas (320x568) cada línea cuenta: se recorta
   el aire alrededor de la pregunta para que «Responder» quepa sin bajar. No se
   toca el tamaño de la pregunta ni el área de toque del botón. */
@media (max-width: 360px) {
  .momento { margin-bottom: 1rem; }
  .momento__quien { font-size: 1.1rem; margin-bottom: 0.2rem; }
  .momento__eco { margin-bottom: 0.5rem; }
  .responder { padding-top: 1rem; }
  .responder .validacion__botones { margin-top: 0.85rem; }
  .relato__etiqueta { margin-bottom: 0.35rem; }
}

/* Aviso de que el camino cambió (se cayó la red, está ocupado). No es un error
   de la persona, así que no se pinta en rojo ni con iconos de alarma. */
.desvio {
  margin: 0 0 1.5rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid var(--lima);
  background: rgb(var(--lima-rgb) / 0.22);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--tinta);
}

.momento::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  bottom: 0.2rem;
  width: 4px;
  background: var(--lima);
}

.momento__quien {
  margin: 0 0 0.45rem;
  font-family: var(--font-firma);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tinta);
}

.momento__pregunta {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.3rem, 1.5vw + 1rem, 1.9rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.momento__pregunta:focus-visible { outline-offset: 6px; }

/* ---------- Lo ya hablado: plegado y en segundo plano ---------- */
.hilo-caja { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.hilo-caja:empty { margin-top: 0; }

.hilo {
  border-top: 1px solid var(--linea-media);
  padding-top: 1rem;
}

.hilo__resumen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding: 0.45rem 0;
}
.hilo__resumen::-webkit-details-marker { display: none; }

.hilo__resumen::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-suave);
}
.hilo[open] .hilo__resumen::before { transform: rotate(-135deg) translateY(-2px); }

.hilo__resumen:hover,
.hilo[open] .hilo__resumen { color: var(--tinta); }

.hilo .hilo-vivo { margin-top: 1.25rem; }

.hilo-vivo .turno--persona { max-width: 38rem; }

/* El bloque de escritura, separado del hilo por una puntada */
/* Orden: pregunta → campo → botones → fichas. Con las fichas en medio quedaban
   casi 300 px entre lo que se pregunta y donde se contesta, y la pregunta se
   iba de la pantalla al abrirse el teclado del móvil. Dejándolas al final, la
   pregunta, el campo y «Responder» caben juntos en una pantalla de 375×667, y
   las fichas siguen ahí para quien prefiere elegir a escribir. */
.responder {
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--linea-media);
  display: flex;
  flex-direction: column;
}
.responder .relato              { margin-top: 0; order: 1; }
.responder .validacion__botones { margin-top: 1.25rem; order: 2; }
.responder .sugerencias         { margin: 1.75rem 0 0; order: 3; }
.hilo-vivo .turno__texto { font-size: var(--fs-body); line-height: 1.6; }

/* Mientras Trazo lee, el campo se apaga sin desaparecer */
.relato__campo[disabled] {
  opacity: 0.55;
  cursor: progress;
}

/* ---------- Sugerencias ----------
   Para quien no quiere escribir: fichas grandes, tocables con el pulgar y
   con barro en las manos. No son píldoras de formulario. */
.sugerencias { margin-bottom: 1.5rem; }

.sugerencias__rotulo {
  margin: 0 0 0.75rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.sugerencias__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.sugerencia {
  padding: 0.8rem 1.05rem;
  border: 1px solid var(--linea-media);
  border-radius: var(--radio);
  background: var(--papel-alto);
  font-size: var(--fs-body);
  line-height: 1.35;
  text-align: left;
  transition: background-color var(--t-suave), border-color var(--t-suave);
}

.sugerencia:hover,
.sugerencia:focus-visible {
  border-color: var(--tinta);
  background: rgb(var(--lima-rgb) / 0.55);
}

/* ---------- Dictado ---------- */
.btn--voz { gap: 0.5rem; }
.btn--voz svg { width: 18px; height: 18px; }

.btn--voz.es-grabando {
  border-color: var(--tinta);
  background: var(--lima);
}
.btn--voz.es-grabando svg { animation: latido 1.4s ease-in-out infinite; }

@keyframes latido {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ---------- Contacto: el único sitio donde Trazo pide algo ---------- */
.contacto {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--papel-alto);
  border-radius: var(--radio-lg);
  border: 1px solid var(--linea-media);
}

.contacto__titulo {
  margin: 0.5rem 0 0.75rem;
  font-size: clamp(1.25rem, 1.4vw + 0.95rem, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.contacto__texto {
  max-width: 54ch;
  margin: 0 0 1.5rem;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--texto-2);
}

.contacto__campos {
  display: grid;
  gap: 1.1rem;
  max-width: 34rem;
}

.contacto__campo { display: grid; gap: 0.4rem; }

.contacto__campo > span {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.contacto__campo input,
.contacto__campo textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--linea-media);
  border-radius: 0;
  background: rgb(var(--taupe-rgb) / 0.16);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--tinta);
  transition: background-color var(--t-suave), border-color var(--t-suave);
}
.contacto__campo textarea { resize: vertical; line-height: 1.6; }

.contacto__campo input:focus-visible,
.contacto__campo textarea:focus-visible {
  background: rgb(var(--lima-rgb) / 0.28);
  border-bottom-color: var(--tinta);
  outline-offset: 2px;
}

.contacto__permiso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: var(--fs-eyebrow);
  line-height: 1.55;
  color: var(--texto-2);
}
.contacto__permiso input { margin-top: 0.2em; width: 18px; height: 18px; accent-color: var(--tinta); }

/* Campo trampa: fuera de la vista y fuera del orden de tabulación. No se usa
   display:none porque algunos robots lo detectan y lo saltan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contacto__enlace {
  margin: 1.1rem 0 0;
  font-size: var(--fs-eyebrow);
}
.contacto__enlace a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;   /* área de toque */
  color: var(--texto-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--linea-media);
}
.contacto__enlace a:hover { color: var(--tinta); text-decoration-color: var(--tinta); }

/* ---------- Página de privacidad ---------- */
.legal {
  grid-column: 1 / -1;
  max-width: 62ch;
}
.legal h2 { margin: clamp(2rem, 4vw, 2.75rem) 0 0.75rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--texto-2); line-height: 1.7; }

.legal__lista {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}
.legal__lista li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--texto-2);
  line-height: 1.65;
}
.legal__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 3px;
  background: var(--lima);
}

.legal__contacto {
  padding-left: 1rem;
  border-left: 3px solid var(--taupe);
}

@media (min-width: 1024px) {
  .legal { grid-column: 2 / 10; }
}

.contacto__respuesta {
  margin: 1.25rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--lima);
  max-width: 48ch;
  font-size: var(--fs-body);
  line-height: 1.6;
}

/* ---------- Texto libre: el momento de escucha de la metodología ---------- */
.relato {
  max-width: 44rem;
  margin-top: 1.5rem;
}

.relato__etiqueta {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto-3);
}

/* Renglones de cuaderno, no caja de formulario */
.relato__campo {
  display: block;
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--linea-media);
  border-radius: 0;
  background: rgb(var(--taupe-rgb) / 0.16);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--tinta);
  resize: vertical;
  transition: background-color var(--t-suave), border-color var(--t-suave);
}

.relato__campo::placeholder { color: var(--taupe-texto-sm); }

.relato__campo:hover { background: rgb(var(--taupe-rgb) / 0.24); }
.relato__campo:focus-visible {
  background: rgb(var(--lima-rgb) / 0.28);
  border-bottom-color: var(--tinta);
  outline-offset: 2px;
}

.relato__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1.25rem;
  margin: 0.7rem 0 0;
}

.relato__aviso {
  flex: 1 1 18rem;
  max-width: 54ch;
  font-size: var(--fs-eyebrow);
  line-height: 1.5;
  color: var(--texto-3);
}

.relato__cuenta {
  flex: 0 0 auto;
  font-size: var(--fs-eyebrow);
  font-variant-numeric: tabular-nums;
  color: var(--taupe-texto-sm);
}

.escucha .validacion__botones { margin-top: 1.6rem; }

/* Las palabras a evitar se tachan: se leen distinto de las que sí usa */
.palabras--evitar li {
  border-bottom-color: transparent;
  color: var(--texto-3);
  text-decoration: line-through;
  text-decoration-color: rgb(var(--tinta-rgb) / 0.35);
  text-decoration-thickness: 1px;
}

/* ---------- Resultado: la misma ficha del ejemplo, dentro del cuaderno ---------- */
.ficha--trazo {
  margin-top: 1.75rem;
  border: 1px solid var(--linea-media);
  box-shadow: none;
}

.ficha--trazo .ficha__marca {
  font-size: clamp(1.45rem, 1.8vw + 0.95rem, 2.15rem);
  line-height: 1.05;
}

.trazo-nota {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-eyebrow);
  line-height: 1.55;
  color: var(--texto-3);
}

/* ---------- Validación: el principio de la metodología, hecho interfaz ---------- */
.validacion { margin-top: 2.25rem; }

.validacion__p {
  margin: 0 0 1.1rem;
  font-size: clamp(1.15rem, 1vw + 0.9rem, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.validacion__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.validacion .btn.es-elegida {
  border-color: var(--tinta);
  background: var(--lima);
}

.validacion__r {
  max-width: 48ch;
  margin: 1.4rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid var(--taupe);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--texto-2);
}

/* ---------- Cierre: hasta dónde llega la metodología completa ---------- */
.cierre { margin-top: 2.5rem; }
.cierre .stitch { margin-bottom: 1.5rem; }

.cierre__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin: 0.9rem 0 1.85rem;
}

.cierre__lista li {
  padding: 0.2rem 0.1rem;
  border-bottom: 1px solid var(--linea-media);
  font-size: var(--fs-small);
  color: var(--texto-2);
}

@media (min-width: 620px) and (max-width: 1023.98px) {
  .prueba.es-resultado .anotaciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 2rem;
  }
}

@media (min-width: 1024px) {
  /* Composición asimétrica: titular a la izquierda y frase de cierre al lado,
     como en metodología. El cuaderno conserva el ancho completo para que la
     ficha del resultado quepa en dos columnas holgadas. */
  .section--prueba .section__head { grid-column: 1 / 8; }

  .section--prueba .statement {
    grid-column: 9 / -1;
    grid-row: 1;
    align-self: end;
    margin-top: 0;
  }

  /* Mientras se responde, el cuaderno se abre en dos páginas: lo anotado a la
     izquierda, la pregunta viva a la derecha. Al llegar el resultado vuelve a
     una sola columna para que la ficha respire. */
  .prueba:not(.es-resultado) .prueba__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .prueba:not(.es-resultado) .anotaciones:not(:empty) { margin-bottom: 0; }
  .prueba:not(.es-resultado) .anotaciones:empty { display: none; }
  .prueba:not(.es-resultado) .anotaciones:empty + .prueba__vivo { grid-column: 1 / -1; }

  /* Con el resultado a la vista, las seis respuestas quedan como recapitulación */
  .prueba.es-resultado .anotaciones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem 2rem;
  }
}

/* ============================================================
   6. RESULTADO — ficha de identidad de marca
   ============================================================ */
.section--resultado .section__head { grid-column: 1 / -1; }

.ficha {
  position: relative;
  grid-column: 1 / -1;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--papel-alto);
  border-radius: var(--radio-lg);
  box-shadow: 0 30px 60px -48px rgb(var(--tinta-rgb) / 0.8);
  overflow: hidden;
}

.ficha__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--taupe);
}

.ficha__marca {
  margin: 0.3rem 0 0;
  font-size: clamp(1.9rem, 3.2vw + 1rem, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.ficha__head .etiqueta { color: rgb(var(--tinta-rgb) / 0.82); }

.ficha__sello {
  margin: 0;
  font-family: var(--font-firma);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--tinta);
  transform: rotate(-2deg);
}
.ficha__sello span { background: var(--lima); padding: 0 0.35em; }

.ficha__cuerpo {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
}

.ficha__col {
  display: grid;
  gap: clamp(1.5rem, 2.5vw, 2rem);
  align-content: start;
}

.campo__label {
  margin: 0 0 0.5rem;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-3);
}

.campo__destacado {
  margin: 0;
  font-size: clamp(1.2rem, 1.1vw + 0.95rem, 1.55rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.campo__texto {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.68;
  color: var(--texto-2);
}

.campo__texto--nota {
  padding-left: 1rem;
  border-left: 3px solid var(--taupe);
}

.personalidad {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
}

.palabras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.palabras li {
  padding: 0.2rem 0.1rem;
  border-bottom: 1px solid var(--linea-media);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--texto-2);
}
.palabras li.es-clave {
  border-bottom-color: transparent;
  background: linear-gradient(to bottom, transparent 55%, var(--lima) 55% 95%, transparent 95%);
  color: var(--tinta);
}

.ficha__pie {
  display: grid;
  gap: 1rem;
  padding: 0 clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
}
.ficha__pie p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-eyebrow);
  line-height: 1.55;
  color: var(--texto-3);
}

@media (min-width: 820px) {
  .ficha__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  /* La ficha entra desplazada y el titular la acompaña, no arranca en el margen */
  .section--resultado .section__head { grid-column: 3 / 10; }
  .ficha { grid-column: 2 / -1; }
}

/* ============================================================
   7. METODOLOGÍA E ISABELA
   ============================================================ */
.metodologia__texto { grid-column: 1 / -1; }

.metodologia__retrato {
  grid-column: 1 / -1;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  max-width: 23rem;
}

.rol {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea-media);
  max-width: 46rem;
}

.rol__intro {
  margin: 0.9rem 0 1.25rem;
  color: var(--texto-3);
  font-size: var(--fs-small);
}

.rol__lista { display: grid; gap: 0.85rem; }

.rol__lista li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.68;
  color: var(--texto-2);
}

.rol__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 12px;
  height: 4px;
  background: var(--lima);
}

/* Por debajo de 900 el retrato ocupa la columna entera: con max-width fijo
   dejaba hasta 172px de hueso vacío al lado y nada que lo acompañara.
   Selector con clase de sección porque la regla base aparece después. */
@media (max-width: 899.98px) {
  .section--metodologia .metodologia__retrato { max-width: none; }
}

@media (min-width: 900px) {
  .metodologia__texto { grid-column: 1 / 7; }
  .metodologia__retrato { grid-column: 8 / -1; margin-top: 0.5rem; justify-self: end; }
  .rol { grid-column: 1 / 8; }
  .section--metodologia .statement {
    grid-column: 9 / -1;
    grid-row: 3;
    align-self: end;
    margin-top: clamp(2.5rem, 4.5vw, 3.5rem);
  }
}

/* ============================================================
   8. MANIFIESTO
   ============================================================ */
.manifiesto {
  /* Fondo oscuro: el anillo de foco en «tinta» sería invisible. */
  --foco: var(--hueso);
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 9vw, 8rem);
  background: var(--tinta);
  color: var(--hueso);
}

.manifiesto__marca {
  --firma-size: clamp(5rem, 13vw, 11rem);
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  /* Lima #E8F0A7 tal cual, que es lo que pidió Isabela: es la firma de la
     marca y debe leerse como el color de la marca. Sobre la tinta del
     manifiesto da 13,6:1, muy por encima del mínimo. Antes iba al 55%, que
     componía a #8C936A y ya no era el color que ella pidió. */
  color: var(--lima);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767.98px) {
  /* En móvil la firma a tamaño completo tapaba el texto, y retirarla dejaba sin
     firma justo donde va a verla casi todo el mundo. Se achica y pasa a ser el
     cierre del bloque: la sección se ordena en columna y la firma va última. */
  .manifiesto { display: flex; flex-direction: column; }
  .manifiesto__inner { order: 1; }
  .manifiesto__marca {
    --firma-size: clamp(3.25rem, 17vw, 5.5rem);
    order: 2;
    position: static;
    display: block;
    margin: 1.75rem var(--gutter) 0 0;
    text-align: right;
  }
}

.manifiesto__inner { position: relative; }

/* Dentro del manifiesto el fondo es tinta, así que el trazo del pincel y el
   anillo de foco en «tinta» quedaban invisibles. Se aclaran. */
.manifiesto .firma__trazo { color: var(--lima); }

.manifiesto__title {
  grid-column: 1 / -1;
  font-size: clamp(2.1rem, 3.9vw + 1.1rem, 4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 17ch;
  margin-bottom: 2rem;
}

/* Sobre fondo oscuro el marcador debe ser bloque sólido: un degradado
   parcial dejaría la mitad superior de las letras en negro sobre negro. */
.manifiesto__title .marca {
  background: var(--lima);
  color: var(--tinta);
  padding: 0 0.14em 0.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.manifiesto__texto {
  grid-column: 1 / -1;
  max-width: 44ch;
  margin-bottom: 2.5rem;
  font-weight: 300;
  color: rgb(var(--hueso-rgb) / 0.86);
}

.manifiesto__remate {
  margin-bottom: 0;
  font-family: var(--font-firma);
  font-size: clamp(1.5rem, 1.8vw + 1.1rem, 2.1rem);
  font-weight: 600;
  line-height: 1.22;
  color: var(--hueso);
}

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

@media (min-width: 900px) {
  .manifiesto__title { grid-column: 1 / 9; }
  .manifiesto__texto { grid-column: 1 / 7; }
  .manifiesto__cta { grid-column: 1 / 7; }
}