/* ¿Y quién pregunta? */

:root {
  --q-paper: #f3ece1;
  --q-night: #0b0a16;
  --q-edge: clamp(1.15rem, 4vw, 4.5rem);
  --q-max: 90rem;
  --seam-h: 240px;
  --ink-claro: #1f1427;
}
html {
  background: var(--q-night);
  scroll-padding-top: 5rem;
}
body.quien {
  color: var(--ink-claro);
  background: var(--q-night);
}
.quien main {
  overflow: clip;
}

/* Fondos: cada sección usa un corte propio de los fondos originales */
.q {
  position: relative;
  --ink: var(--ink-claro);
  --text: #3a2f40;
  --line: rgba(31, 20, 39, 0.2);
  --velo: transparent;
  color: var(--ink);
}
.q::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--color);
  background-position: var(--pos, center);
  background-repeat: no-repeat;
  background-size: cover;
}
.q.is-lit::before,
html:not(.js) .q::before {
  background-image: linear-gradient(var(--velo), var(--velo)), var(--img);
}
.q > * {
  position: relative;
  z-index: 2;
}
.q + .q::before {
  top: calc(var(--seam-h) * -1);
  --fade:
    linear-gradient(
        transparent,
        rgba(0, 0, 0, 0.04) 12%,
        rgba(0, 0, 0, 0.16) 25%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.84) 75%,
        rgba(0, 0, 0, 0.96) 88%,
        #000
      )
      left top/100% var(--seam-h) no-repeat,
    linear-gradient(#000 0 0) left calc(var(--seam-h) - 2px)/100% 100% no-repeat;
  -webkit-mask: var(--fade);
  mask: var(--fade);
}
.q[data-tone="dark"] {
  --ink: #fff;
  --text: #efeaf6;
  --line: rgba(255, 255, 255, 0.2);
}
.q-open {
  --color: #1f5d05;
  --img: url("../img/quien-apertura.webp");
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(7rem, 12vh, 9rem) var(--q-edge) clamp(6rem, 10vh, 8rem);
}
.q-depende {
  --color: #fdf3f0;
  --img: url("../img/quien-depende.webp");
  min-height: 92svh;
  display: grid;
  place-items: center;
  padding: calc(var(--seam-h) + 2rem) var(--q-edge) clamp(6rem, 10vw, 9rem);
  text-align: center;
}
.q-narrans {
  --color: #07081a;
  --velo: rgba(5, 5, 14, 0.82);
  --img: url("../img/quien-narrans.webp");
  padding: calc(var(--seam-h) + 4rem) 0 clamp(8rem, 12vw, 12rem);
}
.q-entre {
  --color: #fdf3f0;
  --img: url("../img/quien-cerca.webp");
  min-height: 96svh;
  display: grid;
  align-items: center;
  padding: calc(var(--seam-h) + 2rem) var(--q-edge) calc(var(--seam-h) * 0.6);
}
.q-climax {
  --color: #1a0a8a;
  --img: url("../img/quien-cierre.webp");
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--seam-h) + 2rem) var(--q-edge);
  color: #fff;
}
.q-exit {
  --color: #fdf3f0;
  --img: url("../img/quien-salida.webp");
  padding: calc(var(--seam-h) + 4rem) var(--q-edge) calc(var(--seam-h) * 0.9);
}

/* Modo oscuro: las secciones claras se apagan */
html[data-mode="oscuro"] .q[data-tone="light"] {
  --ink: #f3ece1;
  --text: #d9d2e0;
  --line: rgba(255, 255, 255, 0.2);
  --velo: rgba(11, 10, 22, 0.88);
  --color: var(--q-night);
}

/* Claro y oscuro */
.q-mode {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1150;
  display: flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(251, 248, 241, 0.92);
  box-shadow:
    0 8px 24px rgba(30, 20, 60, 0.14),
    inset 0 0 0 1px rgba(20, 16, 44, 0.1);
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease),
    visibility 0s;
}
html[data-mode="oscuro"] .q-mode {
  background: rgba(20, 18, 36, 0.92);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.q-mode.is-away {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease),
    visibility 0s 0.3s;
}
.q-mode button {
  min-height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  color: #1f1427;
  font-size: 13px;
  font-weight: 600;
}
html[data-mode="oscuro"] .q-mode button {
  color: #f3ece1;
}
.q-mode button[aria-pressed="true"] {
  color: #f3ece1;
  background: #1f1427;
}
html[data-mode="oscuro"] .q-mode button[aria-pressed="true"] {
  color: #1f1427;
  background: #f3ece1;
}

/* Apertura */
.q-open__grid {
  width: min(100%, var(--q-max));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
  gap: clamp(2.5rem, 6vw, 7rem);
  align-items: center;
}
.q-open__title {
  margin: 0;
  color: #140a2e;
  font-size: clamp(4.6rem, 11.5vw, 12.5rem);
  font-weight: 800;
  line-height: 0.76;
  letter-spacing: -0.085em;
}
.q-open__title span {
  display: block;
}
.q-open__title span:last-child {
  margin-left: 0.32em;
}
.q-open__lead {
  width: fit-content;
  max-width: 34ch;
  margin: clamp(2rem, 4vw, 3rem) 0 0 0.2em;
  padding: 14px 19px 15px;
  border-radius: 22px;
  border-bottom-left-radius: 7px;
  color: #1f1427;
  background: #fbf8f1;
  font-size: clamp(1.1rem, 1.45vw, 1.4rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

/* Conversación */
.q-thread {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.b {
  max-width: 82%;
  padding: 12px 17px 13px;
  border-radius: 22px;
  font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transform-origin: left bottom;
}
.b--in {
  align-self: flex-start;
  border-bottom-left-radius: 7px;
  color: #1f1427;
  background: #fbf8f1;
}
.b--out {
  align-self: flex-end;
  border-bottom-right-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #2453ff, #0000ff 60%, #4f1bff);
  transform-origin: right bottom;
}
.b--meta {
  align-self: flex-end;
  max-width: none;
  padding: 0 6px;
  border-radius: 0;
  background: none;
  color: #140a2e;
  font-size: 12px;
  font-weight: 600;
}
.b--typing {
  display: flex;
  gap: 5px;
  padding: 14px 16px;
  align-self: flex-start;
  border-bottom-left-radius: 7px;
  background: #fbf8f1;
}
.b--typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6a6072;
  animation: escribe 1.2s ease-in-out infinite;
}
.b--typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.b--typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes escribe {
  0%,
  60%,
  100% {
    transform: none;
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.q-thread.is-in .b {
  animation: burbuja 0.55s var(--ease) both;
  animation-delay: calc(var(--i, 7) * 520ms + 200ms);
}
.q-thread.is-in .b--typing {
  --i: 9;
}
.no-js .b,
.q-thread.is-static .b {
  opacity: 1;
  transform: none;
}
@keyframes burbuja {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Depende */
.q-depende__text {
  max-width: 19ch;
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.6rem, 6.4vw, 6.8rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.06em;
  text-wrap: balance;
}

/* Homo narrans */
.q-poem {
  width: min(100% - var(--q-edge) * 2, var(--q-max));
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(1.8rem, 4vw, 3.6rem);
  color: #fff;
  font-size: clamp(2rem, 4.3vw, 4.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
}
.q-poem li {
  max-width: 21ch;
  text-wrap: balance;
}
.q-poem li:nth-child(2) {
  margin-left: auto;
}
.q-puente {
  width: min(100% - var(--q-edge) * 2, var(--q-max));
  max-width: none;
  margin: clamp(4rem, 8vw, 7rem) auto 0;
  color: var(--green);
  font-size: clamp(1.3rem, 2.1vw, 2rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.03em;
}
.q-word {
  margin: clamp(2rem, 3.4vw, 3rem) 0 0;
  padding: 0 var(--q-edge);
  font-size: calc((100vw - var(--q-edge) * 2) / 4.68);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0;
}
.q-word__line {
  display: flex;
  align-items: center;
  gap: 0.14em;
}
.q-word__text {
  position: relative;
  display: block;
  flex: none;
  isolation: isolate;
}
.q-word__text::before,
.q-word__text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.q-word__text::before {
  color: var(--blue);
  transform: translate(-0.022em, 0.014em);
}
.q-word__text::after {
  color: var(--green);
  transform: translate(0.02em, -0.012em);
}
.q-word__text b {
  display: block;
  font-weight: 400;
  color: transparent;
  background: url("../img/quien-letras.webp") var(--x, 0) 50%/100vw auto;
  -webkit-background-clip: text;
  background-clip: text;
}
.q-word__line:last-child .q-word__text b {
  --x: 100%;
}
.q-word.is-on .q-word__text::before {
  animation: corrimiento-a 5s steps(1) infinite;
}
.q-word.is-on .q-word__text::after {
  animation: corrimiento-b 5s steps(1) infinite;
}
@keyframes corrimiento-a {
  0%,
  91%,
  100% {
    transform: translate(-0.022em, 0.014em);
  }
  92% {
    transform: translate(-0.07em, 0);
  }
  94% {
    transform: translate(0.03em, 0.03em);
  }
  96% {
    transform: translate(-0.05em, -0.02em);
  }
}
@keyframes corrimiento-b {
  0%,
  91%,
  100% {
    transform: translate(0.02em, -0.012em);
  }
  92% {
    transform: translate(0.06em, 0.02em);
  }
  94% {
    transform: translate(-0.03em, -0.03em);
  }
  96% {
    transform: translate(0.05em, 0.01em);
  }
}
.q-wave {
  flex: 1;
  min-width: 0;
  height: 0.68em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.012em;
}
.q-wave i {
  flex: 1 1 0;
  min-width: 1px;
  height: calc(var(--h) * 1%);
  background: var(--orange);
}
.q-wave.is-on i {
  animation: habla 1.3s steps(5) infinite alternate;
  animation-delay: calc(var(--d) * -83ms);
}
@keyframes habla {
  from {
    transform: scaleY(0.3);
  }
  to {
    transform: scaleY(1);
  }
}
.q-narrans__copy {
  width: min(100% - var(--q-edge) * 2, var(--q-max));
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  color: var(--text);
  font-size: clamp(1.15rem, 1.55vw, 1.5rem);
  line-height: 1.42;
  letter-spacing: -0.012em;
}
.q-narrans__copy p {
  max-width: 36rem;
  margin: 0 0 1em auto;
}
.q-narrans__copy p:last-child {
  margin-bottom: 0;
}

/* Entre dos */
.q-entre__title {
  width: min(100%, var(--q-max));
  margin: auto;
  color: var(--ink);
  font-size: clamp(2.8rem, 7vw, 7.6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.065em;
}
.q-entre__title span {
  display: block;
  max-width: 15ch;
  text-wrap: balance;
}
.q-entre__title span:last-child {
  margin: 0.5em 0 0 auto;
  color: var(--blue);
  text-align: right;
}
html[data-mode="oscuro"] .q-entre__title span:last-child {
  color: var(--green);
}

/* Clímax */
.q-climax__text {
  margin: 0;
  text-align: center;
  font-size: clamp(3.6rem, 9vw, 9.6rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.08em;
  text-wrap: balance;
}
.q-coincide,
.q-curious {
  position: relative;
  display: block;
}
.q-coincide::before,
.q-coincide::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  pointer-events: none;
}
.q-coincide::before {
  -webkit-text-stroke: 1.5px var(--pink);
  transform: translate(-0.05em, 0.03em);
}
.q-coincide::after {
  -webkit-text-stroke: 1.5px var(--green);
  transform: translate(0.06em, -0.02em);
}
.q-curious {
  margin-top: 0.18em;
  color: var(--green);
}

/* Salida */
.q-exit > * {
  width: min(100%, var(--q-max));
  margin-inline: auto;
}
.q-exit__lead {
  margin-top: 0;
  margin-bottom: clamp(0.6rem, 1.4vw, 1.2rem);
  color: var(--ink);
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}
.q-exit__go {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.1em;
  color: var(--blue);
  font-size: clamp(5rem, 20.5vw, 23rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.085em;
}
html[data-mode="oscuro"] .q-exit__go {
  color: #8197ff;
}
.q-exit__go .arrow {
  font-weight: 400;
  transition: transform 0.2s var(--ease);
}
.q-exit__go:hover {
  color: var(--ink);
}
.q-exit__go:hover .arrow {
  transform: translateX(0.08em);
}

/* Directorio */
.q-dir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem clamp(2rem, 6vw, 6rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
}
.q-dir__title {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.4;
}
.q-dir dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem 2rem;
  margin: 0;
}
.q-dir dt {
  margin-bottom: 0.3rem;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.q-dir dd {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  font-weight: 600;
  line-height: 1.35;
}
.q-dir dd a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Pie */
.quien .site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--seam-h) * -1);
  z-index: 1;
  height: var(--seam-h);
  background: var(--night);
  -webkit-mask: linear-gradient(
    transparent,
    rgba(0, 0, 0, 0.04) 12%,
    rgba(0, 0, 0, 0.16) 25%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.84) 75%,
    rgba(0, 0, 0, 0.96) 88%,
    #000
  );
  mask: linear-gradient(
    transparent,
    rgba(0, 0, 0, 0.04) 12%,
    rgba(0, 0, 0, 0.16) 25%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.84) 75%,
    rgba(0, 0, 0, 0.96) 88%,
    #000
  );
  pointer-events: none;
}

@media (max-width: 1100px) {
  .q-open__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .q-thread {
    width: min(100%, 30rem);
    margin-left: auto;
  }
}
@media (max-width: 1020px) {
  :root {
    --seam-h: 190px;
  }
}
@media (max-width: 720px) {
  :root {
    --q-edge: 22px;
    --seam-h: 150px;
  }
  .q-mode {
    left: auto;
    right: 12px;
    bottom: auto;
    top: max(12px, env(safe-area-inset-top));
    padding: 3px;
  }
  .q-mode button {
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
  }
  .q-open {
    padding: 5.5rem var(--q-edge) 6rem;
  }
  .q-open__grid {
    gap: 2.6rem;
  }
  .q-open__title {
    font-size: 20vw;
  }
  .q-open__title span:last-child {
    margin-left: 0.12em;
  }
  .q-open__lead {
    margin-left: 0;
    font-size: 1.08rem;
  }
  .b {
    max-width: 88%;
    padding: 11px 15px 12px;
    font-size: 1rem;
  }
  .q-depende {
    min-height: 0;
  }
  .q-depende__text {
    font-size: clamp(2.5rem, 12.5vw, 3.6rem);
  }
  .q-poem li:nth-child(2) {
    margin-left: 0;
  }
  .q-entre {
    min-height: 0;
    padding-bottom: calc(var(--seam-h) * 1.05);
  }
  .q-entre__title {
    font-size: clamp(2.6rem, 12.6vw, 3.8rem);
  }
  .q-climax {
    min-height: 86svh;
    padding: calc(var(--seam-h) * 1.5) 14px calc(var(--seam-h) + 3rem);
  }
  .q-climax__text {
    font-size: clamp(3rem, 15.5vw, 5.4rem);
  }
  .q-dir {
    grid-template-columns: minmax(0, 1fr);
  }
  .q-dir dl {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .b {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
  .b--typing i,
  .q-wave i,
  .q-word__text::before,
  .q-word__text::after {
    animation: none !important;
  }
}