/* ==========================================================================
   EnBlanco · #porque «Por qué EnBlanco» (oscuro)
   Composición: manifiesto a todo el ancho («en blanco» sobre una hoja blanca,
   «llenamos» que se llena de terracota al entrar), una fila de texto en dos
   columnas y debajo la hoja: un campo blanco entero sobre el negro tinta con los
   cuatro argumentos reales, que se «escriben» al entrar (js/porque.js).
   Sin tarjetas en zigzag (#proceso) ni ruta centrada (#recorrido). Solo tokens.
   ========================================================================== */

/* ---- Manifiesto ---------------------------------------------------------- */
.pq-head { display: grid; gap: clamp(var(--s-5), 5vw, var(--s-7)); }

.pq-title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.5rem, 0.55rem + 5.25vw, 5rem); /* 40–80: cada frase cabe en una línea en escritorio */
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.pq-title__line { display: block; }
.pq-title__line + .pq-title__line { margin-top: .08em; }
@media (min-width: 1080px) {
  .pq-title__line { white-space: nowrap; }
}

/* «en blanco»: la palabra literalmente sobre una hoja en blanco (inverso de .hl) */
.pq-blank {
  display: inline-block;
  padding: .02em .14em .07em;
  margin-inline: -.02em;
  line-height: .92;
  border-radius: .12em;
  background: var(--c-blanco);
  color: var(--c-tinta);
}

/* «llenamos»: el bloque terracota se llena de izquierda a derecha al entrar */
.pq-fill { position: relative; isolation: isolate; background: transparent; }
.pq-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c-terracota);
  transform-origin: left center;
}
.reveal-on .pq-title:not(.is-revealed) .pq-fill::before { transform: scaleX(0); }
.reveal-on .pq-title .pq-fill::before {
  transition: transform 720ms var(--ease-in-out) 420ms;
}

/* ---- Fila de texto ------------------------------------------------------- */
.pq-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s-4) var(--gutter);
  align-items: start;
}
.pq-intro__lead {
  grid-column: 1 / span 7;
  font-size: var(--fs-4);
  line-height: 1.35;
  color: var(--c-blanco);
  max-width: 34ch;
}
.pq-intro__side {
  grid-column: 9 / -1;
  display: grid;
  gap: var(--s-2);
}
.pq-intro__who {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
  color: var(--c-blanco);
}
.pq-intro__who::before {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border-radius: 2px;
  background: var(--c-terracota);
  transform: translateY(-1px);
}
.pq-intro__body { color: var(--c-arena); max-width: 40ch; }

/* ---- La hoja ------------------------------------------------------------- */
.pq-sheet {
  --focus: var(--c-terracota);
  margin-top: clamp(var(--s-6), 7vw, var(--s-8));
  padding: clamp(var(--s-3), 4.4vw, var(--s-7));
  border-radius: var(--r-bento);
  background: var(--c-blanco);
  color: var(--c-tinta);
}
.pq-sheet__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: clamp(var(--s-5), 5vw, var(--s-7));
}
.pq-sheet__title {
  font-size: var(--fs-4);
  font-weight: var(--fw-display);
}

.pq-sheet__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap-min);
  padding: 0 18px 0 14px;
  border-radius: var(--r-pill);
  background: var(--c-hueso);
  color: var(--c-tinta);
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease;
}
.pq-sheet__toggle[hidden] { display: none; }
.pq-sheet__toggle:active { transform: scale(var(--press-scale)); }
.pq-sheet__toggle-mark {
  width: 14px; height: 14px;
  border-radius: 3px;
  background: var(--c-terracota);
  box-shadow: inset 0 0 0 2px var(--c-terracota);
  transition: background-color var(--dur-ui) ease;
}
.pq-sheet[data-state="blank"] .pq-sheet__toggle-mark { background: var(--c-blanco); }
@media (hover: hover) and (pointer: fine) {
  .pq-sheet__toggle:hover { background: var(--c-arena); }
}

/* Cuatro argumentos: dos columnas, sin filetes; se separan por aire */
.pq-args {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--s-5), 5vw, var(--s-7)) clamp(var(--s-4), 5vw, var(--s-8));
}
.pq-arg { position: relative; min-width: 0; }
.pq-arg__title {
  font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.875rem); /* 28–46 */
  font-weight: var(--fw-display);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  max-width: 16ch;
}
.pq-arg__body {
  margin-top: var(--s-2);
  max-width: 44ch;
  color: var(--c-grafito);
}

/* Renglones de la hoja vacía (solo se ven con la hoja en blanco) */
.pq-lines {
  position: absolute;
  inset: 0 0 auto 0;
  display: grid;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-ui) ease;
}
.pq-lines i {
  display: block;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--c-hueso);
}
.pq-lines i:first-child { height: 34px; width: 72%; margin-bottom: 8px; border-radius: 10px; }
.pq-lines i:nth-child(2) { width: 94%; }
.pq-lines i:nth-child(3) { width: 66%; }
.pq-lines i:nth-child(4) { width: 80%; }

/* Escritura: el texto se descubre de izquierda a derecha, uno tras otro */
.pq-js .pq-ink {
  clip-path: inset(0 0 0 0);
  transition: clip-path 760ms var(--ease-in-out);
  transition-delay: calc(var(--i, 0) * 140ms + 120ms);
}
.pq-js .pq-sheet[data-state="blank"] .pq-ink {
  clip-path: inset(0 100% 0 0);
  transition-duration: 220ms;
  transition-delay: 0ms;
  transition-timing-function: var(--ease-out);
}
.pq-js .pq-sheet[data-state="blank"] .pq-lines { opacity: 1; }
.pq-js .pq-sheet[data-state="full"] .pq-lines { transition-delay: calc(var(--i, 0) * 140ms + 260ms); }
.pq-sheet[data-instant] .pq-ink,
.pq-sheet[data-instant] .pq-lines { transition: none !important; }

/* ---- Los dueños: enlaces a las tarjetas digitales reales ----------------- */
.pq-people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.pq-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "mono name" "mono meta" "go go";
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  height: 100%;
  padding: var(--s-2) var(--s-2) 14px;
  border-radius: var(--r-md);
  background: var(--c-hueso);
  color: var(--c-tinta);
  text-decoration: none;
  touch-action: manipulation;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-fast) ease;
}
.pq-person:active { transform: scale(.98); }
.pq-person__mono {
  grid-area: mono;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-sm);
  background: var(--c-tinta);
  color: var(--c-blanco);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: 1.125rem;
  letter-spacing: -.02em;
}
.pq-person__name {
  grid-area: name;
  align-self: end;
  font-family: var(--font-display);
  font-weight: var(--fw-title);
  font-size: 1.1875rem;
  line-height: 1.15;
}
.pq-person__meta {
  grid-area: meta;
  align-self: start;
  font-size: var(--fs-1);
  color: var(--c-grafito);
}
.pq-person__go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--fs-2);
  font-weight: var(--fw-strong);
}
.pq-person__go svg { transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pq-person:hover { background: var(--c-arena); }
  .pq-person:hover .pq-person__go svg { transform: translateX(2px); }
}

/* ---- Tableta y teléfono -------------------------------------------------- */
@media (max-width: 1079px) {
  .pq-intro__lead { grid-column: 1 / -1; max-width: 40ch; }
  .pq-intro__side { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s-4); align-items: start; }
  .pq-people { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .pq-intro { grid-template-columns: minmax(0, 1fr); }
  .pq-intro__side { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .pq-args { grid-template-columns: minmax(0, 1fr); }
  .pq-sheet__bar { margin-bottom: var(--s-5); }
}

/* Movimiento reducido: sin barrido; la hoja se vacía y se llena con un fundido */
@media (prefers-reduced-motion: reduce) {
  .pq-js .pq-ink { clip-path: none !important; opacity: 1; transition: opacity 200ms ease; transition-delay: 0ms; }
  .pq-js .pq-sheet[data-state="blank"] .pq-ink { opacity: 0; }
  .pq-sheet__toggle:active, .pq-person:active { transform: none; }
  .pq-person__go svg { transition: none; }
}