/* ==========================================================
   Yuseph · Project Manager
   Concepto: «Problema → resuelto», en clave de cómic pop art.
   Rosa para los problemas, lima para lo resuelto, tinta negra
   y tramas de puntos de imprenta.
   ========================================================== */

:root {
  --paper: #F4F0E6;
  --paper-2: #EBE5D6;
  --card: #FFFDF8;
  --ink: #15151A;
  --ink-2: #44424C;
  --ink-3: #66626E;
  --line: rgba(21, 21, 26, .13);
  --line-strong: rgba(21, 21, 26, .3);

  --marker: #D9F85E;
  --marker-deep: #B5D62C;
  --marker-soft: #F1FBC9;
  --coral: #FF7A50;
  --coral-soft: #FFD9CB;
  --coral-ink: #A83A14;
  --sky: #9DB8FF;
  --sky-soft: #DCE6FF;
  --mint-soft: #CFEFD9;
  --pop-pink: #FF5C93;
  --pop-pink-soft: #FFE0EB;
  --pop-yellow: #FFE14D;
  --pop-blue: #7FB2FF;
  --pop-orange: #FFA94D;

  --night: #141418;
  --night-2: #1D1D23;
  --night-line: rgba(255, 255, 255, .14);
  --night-text: #EDE9DF;
  --night-muted: #ABA7B4;

  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-pop: "Bangers", "Impact", "Arial Black", sans-serif;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --header-h: 72px;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(rgba(21, 21, 26, .085) 1px, transparent 1.4px);
  background-size: 22px 22px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: rgba(21, 21, 26, .07);
  padding: .1em .35em;
  border-radius: 5px;
}

::selection { background: var(--marker); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
.section--night :focus-visible { outline-color: var(--marker); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 599px) {
  .vh-sm {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Marcador ---------- */
.marker {
  color: inherit;
  background-color: transparent;
  background-image: linear-gradient(transparent 14%, var(--marker) 14%, var(--marker) 90%, transparent 90%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  padding: 0 .08em;
  margin: 0 -.04em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1s var(--ease) .25s;
}
.marker.is-in, .no-js .marker { background-size: 100% 100%; }
.section--night .marker { color: var(--ink); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .7em 1.3em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 600 1rem/1.15 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: none; box-shadow: none; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { box-shadow: 3px 3px 0 var(--marker-deep); }
.btn--marker { background: var(--marker); }
.btn--line { background: transparent; }
.btn--sm { min-height: 44px; padding: .55em 1.05em; font-size: .94rem; }
.btn__icon {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.btn[aria-disabled="true"], .btn.is-pending {
  cursor: not-allowed;
  border-style: dashed;
  background: transparent;
  color: var(--ink-3);
  box-shadow: none;
  transform: none;
}

.badge-pending {
  display: inline-block;
  margin-left: .4em;
  padding: .15em .5em;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--coral-ink);
  font: 600 .68rem/1.3 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  vertical-align: middle;
}

.link-btn {
  background: none;
  border: 0;
  padding: 4px 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.status-msg {
  min-height: 1.6em;
  margin: 12px 0 0;
  font-size: .95rem;
  font-weight: 500;
}
.status-msg.is-ok::before { content: "✓ "; }

/* ---------- Etiquetas tipo ticket ---------- */
.ticket {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 18px;
  padding: .4em .8em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  font: 500 .76rem/1.2 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ticket::before {
  content: "";
  width: .6em; height: .6em;
  border-radius: 2px;
  background: var(--marker);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}
.section--night .ticket {
  background: var(--night-2);
  border-color: var(--night-line);
  color: var(--night-text);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 500 .78rem/1.4 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.dot-live {
  width: 10px; height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--marker-deep);
  box-shadow: 0 0 0 0 rgba(181, 214, 44, .7);
  animation: pulse 2.4s var(--ease) 4;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 10px rgba(181, 214, 44, 0); }
  100% { box-shadow: 0 0 0 0 rgba(181, 214, 44, 0); }
}

/* ---------- Cabecera ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 240, 230, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.topbar.is-scrolled { border-bottom-color: var(--line); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 12px;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--ink);
  transition: transform .3s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-8deg); }
.brand__mark svg { width: 22px; height: 22px; }
.brand__name { font: 700 1.3rem/1 var(--font-display); letter-spacing: -.02em; }
.brand__role {
  padding-left: 10px;
  border-left: 1px solid var(--line-strong);
  font: 500 .7rem/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .97rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s;
}
.nav__list a:hover { background: rgba(21, 21, 26, .07); }
.nav__list a.is-active { background: var(--marker); }
.nav__list .nav__cta {
  margin-left: 8px;
  padding: 0 18px;
  background: var(--ink);
  color: var(--paper);
}
.nav__list .nav__cta:hover { background: #2a2a33; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 600 .95rem/1 var(--font-body);
  cursor: pointer;
}
.nav__burger { position: relative; width: 18px; height: 12px; }
.nav__burger i {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.nav__burger i:first-child { top: 2px; }
.nav__burger i:last-child { top: 8px; }
.nav.is-open .nav__burger i:first-child { top: 5px; transform: rotate(45deg); }
.nav.is-open .nav__burger i:last-child { top: 5px; transform: rotate(-45deg); }

@media (max-width: 959px) {
  .js .nav__toggle { display: inline-flex; }
  .js .nav__list {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1.5px solid var(--ink);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s;
  }
  .js .nav.is-open .nav__list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s, transform .25s var(--ease), visibility 0s;
  }
  .js .nav__list a {
    width: 100%;
    min-height: 58px;
    padding: 0 8px;
    border-radius: 12px;
    border-bottom: 1px solid var(--line);
    font: 600 1.45rem/1.2 var(--font-display);
  }
  .js .nav__list .nav__cta {
    justify-content: center;
    margin: 16px 0 0;
    border-bottom: 0;
  }
  .no-js .topbar__inner { flex-wrap: wrap; height: auto; padding-block: 10px; }
  .no-js .nav__list { flex-wrap: wrap; }
}
@media (max-width: 440px) {
  .brand__role { display: none; }
}

.progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* ---------- Hero ---------- */
.hero { padding: clamp(32px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
/* Evita que un contenido sin salto de línea ensanche las columnas en móvil */
.hero__grid > *, .split > *, .profile > *, .contact__grid > *,
.sim__panel > *, .services > *, .phase > *, .doors > * { min-width: 0; }
@media (min-width: 1040px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.hero__title {
  margin: .35em 0 .4em;
  font-size: clamp(2.55rem, 1.45rem + 3.9vw, 4.4rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.04em;
}
.hero__lead {
  max-width: 34em;
  font-size: clamp(1.08rem, 1rem + .35vw, 1.22rem);
  color: var(--ink-2);
}

.doors {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 560px) { .doors { grid-template-columns: 1fr 1fr; } }
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
  justify-content: center;
  padding: 16px 56px 16px 20px;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.door:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
.door--primary { background: var(--ink); color: var(--paper); }
.door--primary:hover { box-shadow: 4px 4px 0 var(--marker-deep); }
.door__kicker {
  font: 500 .72rem/1.3 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .82;
}
.door__title { font: 700 1.16rem/1.2 var(--font-display); }
.door__arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--marker);
  color: var(--ink);
  font-weight: 700;
  transform: translateY(-50%);
  transition: transform .25s var(--ease);
}
.door:hover .door__arrow { transform: translate(4px, -50%); }

/* ---------- Título: letras que se ordenan ---------- */
.jumble { display: inline-block; white-space: nowrap; }
.jumble__l {
  display: inline-block;
  transition: transform .65s cubic-bezier(.3, 1.6, .5, 1), text-shadow .4s;
}
.jumble.is-chaos .jumble__l {
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg));
  text-shadow: 3px 3px 0 var(--pop-pink);
}

/* ---------- Viñeta de la portada ---------- */
.comic { position: relative; padding-bottom: 4px; }
.comic__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  min-height: clamp(290px, 30vw, 370px);
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  background-color: var(--pop-pink-soft);
  background-image: radial-gradient(var(--pop-pink) 21%, transparent 23%);
  background-size: 13px 13px;
  box-shadow: 10px 10px 0 var(--ink);
}
@media (max-width: 599px) { .comic__panel { box-shadow: 6px 6px 0 var(--ink); } }
.comic.is-done .comic__panel {
  background-color: var(--marker-soft);
  background-image: radial-gradient(var(--marker-deep) 21%, transparent 23%);
}

/* Medidor de flujo: la aguja pasa de «caos» a «flujo» al resolver problemas */
.meter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 24px 14px 76px;
  border-right: 2.5px solid var(--ink);
  border-radius: 6px 0 0 6px;
  background-color: var(--pop-yellow);
  background-image: radial-gradient(rgba(21, 21, 26, .13) 22%, transparent 24%);
  background-size: 9px 9px;
}
.meter__title {
  margin: 0;
  font: 400 clamp(1rem, .85rem + .5vw, 1.35rem)/1 var(--font-pop);
  letter-spacing: .06em;
  text-align: center;
}
.meter__dial { width: 100%; max-width: 240px; height: auto; overflow: visible; }
.meter__base { fill: none; stroke: var(--ink); stroke-width: 34; }
.meter__zone { fill: none; stroke-width: 26; }
.meter__zone--caos { stroke: var(--pop-pink); }
.meter__zone--medio { stroke: var(--pop-orange); }
.meter__zone--flujo { stroke: var(--marker); }
.meter__ticks { fill: none; stroke: var(--ink); stroke-width: 3; }
.meter__dial text { font: 400 13px var(--font-pop); letter-spacing: .06em; fill: var(--ink); }
.meter__needle {
  --a: -78deg;
  transform-box: view-box;
  transform-origin: 100px 108px;
  transform: rotate(var(--a));
  transition: transform 1s cubic-bezier(.3, 1.7, .5, 1);
}
.meter__needle path { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.meter__needle circle { fill: var(--pop-pink); stroke: var(--ink); stroke-width: 3; }
.meter__read {
  margin: 0;
  padding: .35em .7em .25em;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  background: var(--pop-pink);
  box-shadow: 3px 3px 0 var(--ink);
  font: 400 clamp(1rem, .85rem + .5vw, 1.35rem)/1.05 var(--font-pop);
  letter-spacing: .06em;
  text-align: center;
  transform: rotate(-3deg);
  transition: background-color .4s;
}
.meter[data-nivel="medio"] .meter__read { background: var(--pop-orange); }
.meter[data-nivel="flujo"] .meter__read { background: var(--marker); }
.meter__read.is-pop { animation: scorePop .5s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .js .meter.is-caos .meter__needle { animation: tiembla .16s linear 1.4s 16 alternate; }
}
@keyframes tiembla { to { transform: rotate(calc(var(--a) + 7deg)); } }

.comic__talk {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  padding: 30px 18px 84px 22px;
}
/* Recuadro de texto de cómic con la pestaña del nombre */
.caption__who {
  margin: 0 0 0 12px;
  padding: .32em .65em .22em;
  border: 2.5px solid var(--ink);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--ink);
  color: var(--pop-yellow);
  font: 400 .92rem/1 var(--font-pop);
  letter-spacing: .08em;
}
.bubble {
  position: relative;
  margin: 0;
  padding: 15px 17px;
  border: 2.5px solid var(--ink);
  border-radius: 6px 18px 18px 18px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  font: 600 clamp(.98rem, .9rem + .3vw, 1.13rem)/1.38 var(--font-display);
  letter-spacing: -.01em;
  overflow-wrap: break-word;
}
.bubble strong { background: var(--marker); padding: 0 .12em; font-weight: 700; }
.bubble.is-pop { animation: bubblePop .45s var(--ease); }
@keyframes bubblePop {
  0% { transform: scale(.9) rotate(-1.5deg); }
  55% { transform: scale(1.04) rotate(.6deg); }
}

.comic__hint {
  position: absolute;
  right: 16px;
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  margin: 0;
  font: 700 1.6rem/1 var(--font-hand);
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
  transform: rotate(-6deg);
  transition: opacity .4s, transform .4s var(--ease);
}
.comic__hint svg {
  width: 32px; height: 32px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.comic.is-started .comic__hint { opacity: 0; transform: rotate(-6deg) translateY(10px); }

/* Contador en forma de estallido */
.comic__score {
  position: absolute;
  top: -30px;
  right: -22px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  margin: 0;
  filter: drop-shadow(2.5px 0 0 var(--ink)) drop-shadow(-2.5px 0 0 var(--ink)) drop-shadow(0 2.5px 0 var(--ink)) drop-shadow(0 -2.5px 0 var(--ink)) drop-shadow(3px 3px 0 var(--ink));
}
.comic__score::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pop-yellow);
  clip-path: polygon(100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%, 50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%, 0 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%, 50% 0, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%);
  transition: background-color .3s;
}
.comic.is-done .comic__score::before { background: var(--marker); }
.comic__score span {
  position: relative;
  font: 400 1.35rem/1 var(--font-pop);
  letter-spacing: .03em;
  transform: rotate(-10deg);
}
.comic__score b { font-weight: 400; font-size: 1.85rem; }
.comic__score.is-pop { animation: scorePop .5s var(--ease); }
@keyframes scorePop {
  40% { transform: scale(1.32) rotate(14deg); }
}
@media (max-width: 599px) {
  .comic__score { width: 70px; height: 70px; top: -30px; right: -6px; }
  .comic__score span { font-size: 1.1rem; }
  .comic__score b { font-size: 1.5rem; }
  .comic__talk { padding: 24px 12px 60px 22px; }
  .comic__hint { font-size: 1.35rem; right: 10px; }
}

/* Pegatinas de problema */
.probs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin: -30px 6px 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 560px) { .probs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; } }
.probs li { display: flex; }
.probs li:nth-child(1) { --i: 0; --r: -3deg; }
.probs li:nth-child(2) { --i: 1; --r: 2.5deg; }
.probs li:nth-child(3) { --i: 2; --r: -1.5deg; }
.probs li:nth-child(4) { --i: 3; --r: 3deg; }
.probs li:nth-child(5) { --i: 4; --r: -2.5deg; }
.probs li:nth-child(6) { --i: 5; --r: 1.5deg; }
.prob {
  position: relative;
  display: grid;
  align-items: start;
  width: 100%;
  min-height: 88px;
  padding: 10px 12px 12px;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: var(--pop-pink);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(var(--r));
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .35s;
  -webkit-tap-highlight-color: transparent;
}
.prob:hover { transform: rotate(0deg) translate(-2px, -3px) scale(1.03); box-shadow: 6px 7px 0 var(--ink); }
.prob:active { transform: rotate(0deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.prob:focus-visible { outline-offset: 5px; }
.prob__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  transition: opacity .25s, transform .45s var(--ease);
}
.prob__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 400 .95rem/1 var(--font-pop);
  letter-spacing: .07em;
}
.prob__label::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--pop-yellow);
  font: 400 .78rem/1 var(--font-pop);
}
.prob__face--s .prob__label::before { content: "✓"; color: var(--marker); font: 700 .7rem/1 var(--font-body); }
.prob__text { font: 700 1rem/1.18 var(--font-display); letter-spacing: -.01em; overflow-wrap: break-word; }
.js .prob__face--s { opacity: 0; transform: scale(.5) rotate(-10deg); }
.prob.is-solved { --r: 0deg; background: var(--marker); }
.prob.is-solved .prob__face--p { opacity: 0; transform: scale(1.4) rotate(8deg); }
.prob.is-solved .prob__face--s { opacity: 1; transform: none; }
.no-js .prob { cursor: default; transform: none; }
.no-js .prob__face { grid-area: auto; }
.no-js .prob__face--s { margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--ink); }
.no-js .comic__foot, .no-js .comic__hint, .no-js .comic__score { display: none; }

.comic__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: 24px;
  padding: 0 6px;
}
.comic__status {
  margin: 0;
  font: 500 .78rem/1.3 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.comic__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (prefers-reduced-motion: no-preference) {
  .js .comic__panel { animation: comicIn .7s var(--ease) .1s both; }
  .js .probs li { animation: stickerIn .6s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(.5s + var(--i) * .09s); }
  .js .prob:not(.is-solved) { animation: wobble 2.2s ease-in-out calc(1.6s + var(--i) * .2s) 2; }
  .js .prob.is-zap { animation: zap .6s var(--ease); }
}
@keyframes comicIn { from { opacity: 0; transform: scale(.93) rotate(-1.5deg); } }
@keyframes stickerIn { from { opacity: 0; transform: translateY(-44px) scale(1.25) rotate(-12deg); } }
@keyframes wobble {
  25% { transform: rotate(calc(var(--r) + 3deg)); }
  75% { transform: rotate(calc(var(--r) - 3deg)); }
}
@keyframes zap {
  0% { transform: rotate(-9deg) scale(.9); }
  35% { transform: rotate(6deg) scale(1.16); }
  65% { transform: rotate(-2deg) scale(.97); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ---------- Franjas ---------- */
.bands { position: relative; overflow: hidden; padding: 28px 0 34px; }
.band { margin: 0 -3%; border-block: 2.5px solid var(--ink); overflow: hidden; }
.band--lime { position: relative; z-index: 2; background: var(--marker); transform: rotate(-2deg); }
.band--ink { margin-top: -12px; background: var(--ink); color: var(--paper); transform: rotate(1.4deg); }
.band__track { display: flex; justify-content: center; }
.band__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  margin: 0;
  padding: 15px var(--gutter);
  list-style: none;
  font: 700 clamp(1.15rem, .9rem + 1.3vw, 2rem)/1.2 var(--font-display);
  letter-spacing: -.02em;
}
.band--ink .band__list {
  padding-block: 12px;
  font: 400 clamp(1.1rem, .9rem + 1vw, 1.75rem)/1.2 var(--font-pop);
  letter-spacing: .05em;
}
.band__list li { white-space: nowrap; }
.band__list li::after { content: "✦"; margin: 0 .7em; font-weight: 400; }
.band--lime .band__list li::after { opacity: .55; }
.band--ink .band__list li::after { color: var(--pop-pink); }
.bands:not(.is-moving) .band__list li:last-child::after { display: none; }
.band--ink i { margin: 0 .2em; font-style: normal; color: var(--pop-pink); }
.band--ink b { font-weight: 400; color: var(--marker); }

/* Las franjas avanzan siempre, en sentidos opuestos (con «reducir movimiento» quedan quietas) */
.bands.is-moving .band__track {
  justify-content: flex-start;
  width: max-content;
  animation: marquee 46s linear infinite;
  will-change: transform;
}
.bands.is-moving .band--ink .band__track { animation-duration: 54s; animation-direction: reverse; }
.bands.is-moving .band__list { flex-wrap: nowrap; padding-inline: 0; }
@keyframes marquee { to { transform: translate3d(-25%, 0, 0); } }

/* ---------- Secciones ---------- */
.section {
  position: relative;
  padding: clamp(72px, 10vw, 136px) 0;
}
.section--night {
  background-color: var(--night);
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.4px);
  background-size: 22px 22px;
  color: var(--night-text);
}
.section--paper2 { background-color: var(--paper-2); }

.section h2 {
  max-width: 21ch;
  font-size: clamp(2.05rem, 1.25rem + 3vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.section-head { max-width: 800px; margin-bottom: clamp(36px, 5vw, 56px); }
.lead {
  max-width: 60ch;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem);
  color: var(--ink-2);
}
.section--night .lead { color: var(--night-muted); }

.split { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7fr); gap: 64px; }
  .split__aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* ---------- Qué resuelvo: tarjetas problema → solución ---------- */
.section-head--tools { display: grid; gap: 22px 40px; max-width: none; }
@media (min-width: 900px) {
  .section-head--tools { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .section-head--tools > div:first-child { max-width: 780px; }
}
.cards__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cards__count { margin: 0; font: 400 1.35rem/1 var(--font-pop); letter-spacing: .05em; }
.cards__count b {
  display: inline-grid;
  place-items: center;
  min-width: 1.7em;
  margin-right: .1em;
  padding: .12em .2em .02em;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--marker);
  font-weight: 400;
  font-size: 1.5em;
  box-shadow: 2px 2px 0 var(--ink);
}
.cards__count b.is-pop { animation: scorePop .5s var(--ease); }

.cards { display: grid; gap: 26px 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card--cta { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card--cta { grid-column: auto; }
}

.card { display: flex; perspective: 1600px; }
.card__inner {
  position: relative;
  display: grid;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.3, 1.35, .45, 1);
}
.card.is-flipped .card__inner { transform: rotateY(180deg); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card:not(.is-flipped) .card__inner:hover { transform: rotateY(-9deg) rotateX(3deg); }
}
.card__face {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 24px 22px 20px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 6px 6px 0 var(--ink);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card__face:focus-visible { outline-offset: 4px; }
.card__face--front { cursor: pointer; }
/* Esquina con trama de puntos rosa, como en la imprenta de cómic */
.card__face--front::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 46%;
  border-radius: 0 0 15px 0;
  background: radial-gradient(var(--pop-pink) 26%, transparent 28%) 0 0 / 11px 11px;
  -webkit-mask-image: linear-gradient(135deg, transparent 45%, #000 100%);
  mask-image: linear-gradient(135deg, transparent 45%, #000 100%);
  opacity: .55;
  pointer-events: none;
}
.card__face--front > * { position: relative; z-index: 1; }
.card__face--front > .card__tag { position: absolute; }
.card__face--back {
  background-color: var(--marker);
  background-image: radial-gradient(rgba(21, 21, 26, .09) 22%, transparent 24%);
  background-size: 11px 11px;
  transform: rotateY(180deg);
}

.card__skill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-right: 92px;
  font: 500 .76rem/1.25 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  transition: background-color .3s, transform .3s var(--ease);
}
.card__face--front:hover .card__icon { background: var(--pop-yellow); transform: rotate(-8deg); }
.card__icon svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card__tag {
  position: absolute;
  top: -15px;
  right: 16px;
  margin: 0;
  padding: .42em .7em .3em;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--pop-pink);
  font: 400 1rem/1 var(--font-pop);
  letter-spacing: .08em;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(4deg);
}
.card__tag--ok { background: var(--ink); color: var(--marker); transform: rotate(-4deg); }
.card__tag--q { background: var(--pop-yellow); }
.card__problem {
  margin: 4px 0 6px;
  font: 700 clamp(1.25rem, 1.12rem + .45vw, 1.45rem)/1.2 var(--font-display);
  letter-spacing: -.02em;
}
.card__label {
  margin: 0;
  font: 500 .72rem/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.card__fix { margin: 0; font-weight: 600; font-size: 1.01rem; line-height: 1.45; }
.card__how {
  margin: 0;
  padding-top: 10px;
  border-top: 2px dashed rgba(21, 21, 26, .35);
  font-size: .93rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.card__face--back .card__how { color: var(--ink); }
.card__btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  align-self: flex-start;
  margin-top: auto;
  min-height: 44px;
  padding: 0 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 600 .92rem/1.1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--pop-pink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card__btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--pop-pink); }
.card__btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--pop-pink); }
.card__btn span { font-size: 1.15em; line-height: 1; }
.card__btn--back { background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.card__btn--back:hover { box-shadow: 5px 5px 0 var(--ink); }

.card--cta .card__face {
  justify-content: flex-start;
  background-color: var(--pop-yellow);
  background-image: radial-gradient(rgba(21, 21, 26, .1) 22%, transparent 24%);
  background-size: 12px 12px;
}
.card--cta .card__how { border-top: 0; padding-top: 0; color: var(--ink); }

.no-js .card__inner { display: block; }
.no-js .card__face--back { margin-top: 14px; transform: none; }
.no-js button.card__btn { display: none; }
.no-js .cards__tools { display: none; }

/* ---------- Servicios ---------- */
.section--pop {
  background-color: #FFF3B3;
  background-image: radial-gradient(rgba(240, 180, 0, .4) 1.8px, transparent 2.2px);
  background-size: 15px 15px;
  border-block: 2.5px solid var(--ink);
}

/* Calculadora del caos */
.calc {
  display: grid;
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 10px 10px 0 var(--ink);
  overflow: hidden;
}
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
@media (max-width: 599px) { .calc { box-shadow: 6px 6px 0 var(--ink); } }
.calc__inputs { min-width: 0; padding: clamp(20px, 3vw, 34px); }
.calc__title {
  margin-bottom: 8px;
  font: 400 clamp(1.6rem, 1.25rem + 1vw, 2.1rem)/1 var(--font-pop);
  letter-spacing: .05em;
}
.calc__base {
  margin: 14px 0 0;
  padding: 8px 12px;
  border: 2px dashed var(--ink);
  border-radius: 10px;
  background: var(--paper);
  font-size: .9rem;
  line-height: 1.45;
}
.calc__base b { font-weight: 700; }
.calc__group { margin: 20px 0 0; padding: 16px 0 0; border: 0; border-top: 2px dashed var(--line-strong); }
.calc__group--first { margin-top: 10px; padding-top: 0; border-top: 0; }
.calc__group legend {
  float: left;
  width: 100%;
  padding: 0;
  font: 700 1.05rem/1.3 var(--font-display);
}
.slider { display: grid; gap: 4px; margin-top: 14px; clear: both; }
.slider__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slider__top label, .slider--cost label { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.slider__val {
  flex: none;
  min-width: 3.2em;
  padding: .2em .45em .1em;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--pop-yellow);
  font: 400 1.15rem/1 var(--font-pop);
  letter-spacing: .04em;
  text-align: center;
}
.slider--cost { gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 2px dashed var(--line-strong); }

/* Controles deslizantes en clave pop */
.range {
  --p: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 30px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pop-pink) var(--p), var(--card) var(--p));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  margin-top: -7px; /* (12 px de pista − 26 px de control) / 2 */
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--pop-yellow);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .15s;
}
.range:active::-webkit-slider-thumb { transform: scale(1.18); }
.range::-moz-range-track { height: 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); }
.range::-moz-range-progress { height: 8px; border: 2px solid var(--ink); border-radius: 999px; background: var(--pop-pink); }
.range::-moz-range-thumb {
  width: 22px; height: 22px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--pop-yellow);
  box-shadow: 2px 2px 0 var(--ink);
}
.range:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 999px; }

.calc__out {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: clamp(22px, 3vw, 36px);
  background-color: var(--ink);
  background-image: radial-gradient(rgba(255, 255, 255, .07) 22%, transparent 24%);
  background-size: 12px 12px;
  color: var(--paper);
}
.calc__kicker {
  margin: 0;
  font: 500 .8rem/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--night-muted);
}
.calc__big {
  display: flex;
  align-items: baseline;
  gap: .18em;
  margin: 0;
  font: 400 clamp(4.4rem, 3rem + 5vw, 7.6rem)/.85 var(--font-pop);
  letter-spacing: .02em;
  color: var(--pop-yellow);
  text-shadow: 5px 5px 0 var(--pop-pink);
}
.calc__big span { font-size: .36em; color: var(--paper); text-shadow: none; }
.calc__react {
  position: absolute;
  top: clamp(64px, 7vw, 84px);
  right: clamp(18px, 3vw, 32px);
  margin: 0;
  padding: .45em .7em .35em;
  border: 2.5px solid var(--paper);
  border-radius: 8px;
  background: var(--pop-pink);
  color: var(--ink);
  font: 400 1.35rem/1 var(--font-pop);
  letter-spacing: .06em;
  box-shadow: 3px 3px 0 var(--paper);
  transform: rotate(8deg);
}
@media (max-width: 599px) { .calc__react { position: static; transform: rotate(-3deg); } }
.calc__react.is-pop { animation: scorePop .5s var(--ease); }
.calc__eq { margin: 0; font-size: 1.06rem; }
.calc__eq b { color: var(--marker); }
.calc__days { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 14px; }
.calc__days i {
  width: 14px; height: 14px;
  border: 1.5px solid var(--paper);
  border-radius: 3px;
  background: var(--pop-pink);
}
.calc__days i.is-new { animation: dayIn .35s var(--ease) both; }
.calc__days span { margin-left: 4px; font: 400 1.05rem/1 var(--font-pop); letter-spacing: .04em; color: var(--pop-pink); }
@keyframes dayIn { from { transform: scale(0) rotate(-45deg); } }
.calc__pitch { max-width: 44ch; margin: 6px 0 0; font-size: 1.03rem; color: var(--night-text); }
.calc__note { margin: 0; font-size: .8rem; color: var(--night-muted); }
/* La operación completa, a la vista */
.calc__formula {
  margin: 0;
  padding: 8px 12px;
  border: 1.5px dashed var(--night-line);
  border-radius: 8px;
  font: 500 .82rem/1.4 var(--font-mono);
  color: var(--night-text);
  overflow-wrap: anywhere;
}
.calc__warn {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--pop-pink);
  color: var(--ink);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.4;
}
.calc__out .btn--marker { border-color: var(--paper); box-shadow: 4px 4px 0 var(--pop-pink); }
.calc__out .btn--marker:hover { box-shadow: 6px 6px 0 var(--pop-pink); }
.calc__out :focus-visible { outline-color: var(--marker); }

/* ¿En qué punto está tu proyecto? */
.pick { margin-top: clamp(56px, 8vw, 88px); }
.pick__title { margin-bottom: 18px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.pick__options { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.pick__btn {
  --r: -1deg;
  min-height: 48px;
  padding: .6em 1.1em;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font: 700 1rem/1.2 var(--font-display);
  text-align: left;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(var(--r));
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.pick__btn:nth-child(2) { --r: 1deg; }
.pick__btn:nth-child(3) { --r: -1.5deg; }
.pick__btn:nth-child(4) { --r: 1.5deg; }
.pick__btn:hover { transform: rotate(0deg) translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.pick__btn[aria-pressed="true"] { background: var(--marker); transform: rotate(0deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pick__result { min-height: 1.6em; margin: 18px 0 0; font-size: 1.05rem; font-weight: 600; }
.pick__result a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Portadas de servicio */
.covers { display: grid; gap: 30px 28px; margin-top: 30px; }
@media (min-width: 820px) { .covers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cover {
  --head: var(--marker);
  --head-ink: var(--ink);
  --cta: var(--marker);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s;
}
.cover--blue { --head: var(--pop-blue); --cta: var(--pop-blue); }
.cover--pink { --head: var(--pop-pink); --cta: var(--pop-pink); }
.cover--ink { --head: var(--ink); --head-ink: var(--paper); --cta: var(--pop-yellow); }
.cover:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); }
.covers.has-match .cover:not(.is-match) { opacity: .55; }
.cover.is-match { transform: translate(-3px, -3px); box-shadow: 0 0 0 5px var(--marker), 12px 12px 0 5px var(--ink); }
.cover.is-matching { animation: matchPop .55s var(--ease); }
@keyframes matchPop {
  0% { transform: translate(0, 0) scale(.97); }
  45% { transform: translate(-3px, -3px) scale(1.025) rotate(-.6deg); }
}
.cover__match {
  display: none;
  position: absolute;
  top: -20px;
  right: 18px;
  z-index: 2;
  margin: 0;
  padding: .42em .75em .32em;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  background: var(--pop-yellow);
  box-shadow: 3px 3px 0 var(--ink);
  font: 400 1.15rem/1 var(--font-pop);
  letter-spacing: .06em;
  transform: rotate(5deg);
}
.cover.is-match .cover__match { display: block; }

.cover__head {
  padding: 22px 24px 20px;
  border-bottom: 2.5px solid var(--ink);
  border-radius: 13.5px 13.5px 0 0;
  background-color: var(--head);
  background-image: radial-gradient(rgba(21, 21, 26, .12) 22%, transparent 24%);
  background-size: 10px 10px;
  color: var(--head-ink);
}
.cover--ink .cover__head { background-image: radial-gradient(rgba(255, 255, 255, .09) 22%, transparent 24%); }
.cover__n { margin: 0 0 8px; font: 400 1.05rem/1 var(--font-pop); letter-spacing: .12em; }
.cover__title {
  margin: 0 0 10px;
  font: 400 clamp(2rem, 1.55rem + 1.4vw, 2.7rem)/.95 var(--font-pop);
  letter-spacing: .03em;
}
.cover--ink .cover__title { color: var(--pop-yellow); }
.cover__for { margin: 0; font-size: .98rem; font-weight: 500; line-height: 1.45; }
.cover__badge {
  display: inline-block;
  margin: 0 0 10px;
  padding: .32em .65em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font: 500 .7rem/1.2 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Antes / después */
.cover__scene { position: relative; display: grid; margin: 22px 24px 0; }
.cover__state {
  grid-area: 1 / 1;
  padding: 16px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
}
.cover__state p { margin: 0; }
.cover__state p + p { font-weight: 600; line-height: 1.45; }
.cover__state--antes {
  background-color: var(--pop-pink-soft);
  background-image: radial-gradient(rgba(255, 92, 147, .3) 22%, transparent 24%);
  background-size: 10px 10px;
}
.cover__state--despues {
  background: var(--marker);
  clip-path: circle(0% at 8% 100%);
  transition: clip-path .75s cubic-bezier(.6, 0, .2, 1);
}
.cover.is-on .cover__state--despues { clip-path: circle(150% at 8% 100%); }
.no-js .cover__state { grid-area: auto; }
.no-js .cover__state--despues { clip-path: none; margin-top: 10px; }
.no-js .switch { display: none; }
.cover__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px !important;
  font: 400 1.08rem/1 var(--font-pop);
  letter-spacing: .07em;
}
.cover__label::before {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ink);
  font: 700 .72rem/1 var(--font-body);
}
.cover__state--antes .cover__label::before { content: "✕"; color: var(--pop-pink); }
.cover__state--despues .cover__label::before { content: "✓"; color: var(--marker); }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  min-height: 44px;
  margin: 12px 24px 0;
  padding: 4px 6px 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 700 .97rem/1.2 var(--font-display);
  cursor: pointer;
}
.switch__track {
  position: relative;
  flex: none;
  width: 58px; height: 32px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--pop-pink-soft);
  box-shadow: 2px 2px 0 var(--ink);
  transition: background-color .3s;
}
.switch__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 21px; height: 21px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.switch[aria-checked="true"] .switch__track { background: var(--marker); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(26px); }
.switch:hover .switch__knob { background: var(--pop-yellow); }

.cover__more { margin: 14px 24px 0; border-top: 2px dashed var(--line-strong); }
.cover__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 6px 0;
  list-style: none;
  cursor: pointer;
  font: 700 1.04rem/1.2 var(--font-display);
  border-radius: 6px;
}
.cover__more summary::-webkit-details-marker { display: none; }
.cover__more summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 28px; height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font: 700 1.1rem/1 var(--font-body);
  transition: transform .3s var(--ease), background-color .3s;
}
.cover__more summary:hover::after { background: var(--pop-yellow); }
.cover__more[open] summary::after { transform: rotate(45deg); background: var(--pop-yellow); }
.checklist { display: grid; gap: 10px; margin: 4px 0 16px; padding: 0; list-style: none; }
.checklist li { position: relative; padding-left: 30px; font-size: .97rem; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .25em;
  width: 19px; height: 19px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--marker) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.cover__get {
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  font-weight: 600;
}
.cover__get span, .mpanel__q span, .mpanel__out span {
  display: block;
  margin-bottom: 4px;
  font: 500 .68rem/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cover__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-top: auto;
  padding: 16px 24px 24px;
}
.cover__format { max-width: 28ch; margin: 0; font-size: .88rem; color: var(--ink-2); }
.cover__cta {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 46px;
  padding: 0 20px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--cta);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.cover__cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--cta); }
.cover__cta span { transition: transform .2s var(--ease); }
.cover__cta:hover span { transform: translateX(3px); }

/* Cómo empezamos */
.start {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-top: clamp(48px, 7vw, 80px);
  padding: clamp(22px, 3vw, 32px);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--pop-pink), 8px 8px 0 2.5px var(--ink);
}
@media (min-width: 1100px) { .start { grid-template-columns: auto minmax(0, 1fr) auto; gap: 32px; } }
.start__title { margin: 0; font: 400 clamp(1.7rem, 1.35rem + 1vw, 2.2rem)/1 var(--font-pop); letter-spacing: .05em; }
.start__steps { display: grid; gap: 12px 24px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
@media (min-width: 700px) { .start__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.start__steps li { position: relative; padding-left: 42px; font-size: .97rem; line-height: 1.45; counter-increment: paso; }
.start__steps li::before {
  content: counter(paso);
  position: absolute;
  left: 0; top: -1px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--pop-yellow);
  font: 400 1.05rem/1 var(--font-pop);
}
.start__steps b { display: block; font-family: var(--font-display); }

/* ---------- Cómo trabajo: cronograma interactivo ---------- */
/* Control de reproducción discreto, en la esquina del cronograma: un disco pequeño cuyo anillo se llena según avanza */
.method__top {
  display: grid;
  grid-template-columns: var(--name-w) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.play {
  --prog: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  max-width: 100%;
  min-height: 36px;
  padding: 3px 12px 3px 3px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font: 500 .68rem/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s;
}
.play:hover { background: var(--paper); }
.play__disc {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: conic-gradient(var(--pop-pink) calc(var(--prog) * 1turn), var(--line-strong) 0);
}
.play__disc::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--pop-yellow);
  transition: background-color .2s, transform .2s var(--ease);
}
.play:hover .play__disc::before { transform: scale(1.08); }
.play.is-playing .play__disc::before { background: var(--card); }
.play__disc svg {
  position: relative;
  width: 12px; height: 12px;
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.play .i-pause { fill: none; stroke-width: 4; }
.play .i-pause, .play.is-playing .i-play { display: none; }
.play.is-playing .i-pause { display: inline; }

/* Barra de tiempo de la fase en curso (se detiene con el puntero encima) */
.method.is-playing .mpanel::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: calc(var(--fase-prog, 0) * 100%);
  height: 6px;
  background: var(--pop-pink);
  border-top: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
}
.method.is-playing.is-held .mpanel::after { background: var(--pop-yellow); }
.method { --name-w: 172px; display: grid; gap: 30px; align-items: start; }
@media (min-width: 1000px) { .method { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; } }
@media (max-width: 599px) { .method { --name-w: 122px; } }
.method__gantt {
  --hoy: 1;
  position: relative;
  padding: 18px 18px 38px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--ink);
}
@media (max-width: 599px) { .method__gantt { padding-inline: 12px; box-shadow: 6px 6px 0 var(--ink); } }
.method__scale {
  display: flex;
  justify-content: space-between;
  min-width: 0;
  margin: 0;
  font: 500 .64rem/1 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 599px) { .method__scale span:nth-child(2) { display: none; } }
.method__rows { display: grid; gap: 6px; }
.mrow {
  display: grid;
  grid-template-columns: var(--name-w) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 2px 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mrow__name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  border: 2px solid transparent;
  border-radius: 8px;
  font: 700 .97rem/1.15 var(--font-display);
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
@media (max-width: 599px) { .mrow__name { padding: 6px 4px; font-size: .86rem; gap: 6px; } }
.mrow__name b {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px; height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  font: 400 .9rem/1 var(--font-pop);
}
.mrow:hover .mrow__name { border-color: var(--ink); }
.mrow[aria-selected="true"] .mrow__name { background: var(--pop-yellow); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.mrow[aria-selected="true"] .mrow__name b { background: var(--ink); color: var(--pop-yellow); }
.mrow__track {
  position: relative;
  height: 30px;
  border-radius: 8px;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.mrow__bar {
  position: absolute;
  top: 5px; bottom: 5px;
  left: calc(var(--start) / 12 * 100%);
  width: calc(var(--span) / 12 * 100%);
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bar, var(--ink)) calc(var(--fill, 1) * 100%), var(--card) calc(var(--fill, 1) * 100%));
  transition: box-shadow .2s, transform .2s;
}
.mrow--main { --bar: var(--marker); }
.mrow[aria-selected="true"] .mrow__bar { box-shadow: 3px 3px 0 var(--pop-pink); transform: translateY(-1px); }
.mrow__bar--hito::after {
  content: "";
  position: absolute;
  right: -9px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border: 2px solid var(--ink);
  background: var(--pop-pink);
  transform: rotate(45deg);
}
.method__hoy {
  position: absolute;
  top: 62px;
  bottom: 30px;
  left: calc(18px + var(--name-w) + 10px + (100% - 36px - var(--name-w) - 10px) * var(--hoy) / 12);
  border-left: 3px dashed var(--pop-pink);
  pointer-events: none;
  transition: left .35s var(--ease);
}
@media (max-width: 599px) { .method__hoy { left: calc(12px + var(--name-w) + 10px + (100% - 24px - var(--name-w) - 10px) * var(--hoy) / 12); } }
.method.is-playing .method__hoy { transition: none; }
.method__hoy span {
  position: absolute;
  bottom: -26px;
  left: 0;
  padding: .25em .55em .15em;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--pop-pink);
  font: 400 .9rem/1 var(--font-pop);
  letter-spacing: .06em;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-4deg);
}

.mpanel {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--pop-pink), 8px 8px 0 2.5px var(--ink);
  overflow: hidden;
}
.js .mpanel { animation: panelIn .45s var(--ease); }
.mpanel:focus-visible { outline-offset: 4px; }
.mpanel__n {
  position: absolute;
  top: -26px;
  right: 6px;
  margin: 0;
  font: 400 9rem/1 var(--font-pop);
  color: var(--pop-yellow);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 6px 6px 0 var(--ink);
  transform: rotate(8deg);
  pointer-events: none;
}
@media (max-width: 599px) { .mpanel__n { top: -16px; font-size: 6.5rem; } }
.mpanel__kicker, .mpanel__title { position: relative; padding-right: 76px; }
.mpanel__kicker {
  margin: 0 0 6px;
  font: 500 .74rem/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mpanel__title { margin-bottom: 12px; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); letter-spacing: -.03em; }
.mpanel > p:not([class]) { position: relative; color: var(--ink-2); font-size: 1.04rem; }
.mpanel__q {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 6px 18px 18px 18px;
  background: var(--pop-yellow);
  font: 700 1.1rem/1.3 var(--font-display);
}
.mpanel__out { margin: 16px 0 0; padding-left: 12px; border-left: 4px solid var(--marker-deep); font-weight: 600; }

.principles { margin-top: clamp(56px, 8vw, 96px); }
.principles__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 24px; }
.principles__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) { .principles__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .principles__list { grid-template-columns: repeat(3, 1fr); } }
.principle {
  position: relative;
  padding: 22px 22px 24px;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.principle:hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 6px 6px 0 var(--ink); }
.principle:nth-child(2) .principle__n, .principle:nth-child(5) .principle__n { background: var(--pop-pink); }
.principle:nth-child(3) .principle__n, .principle:nth-child(6) .principle__n { background: var(--pop-yellow); }
.principle:nth-child(4) .principle__n { background: var(--pop-blue); }
.principle__n {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  margin-bottom: 14px;
  border-radius: 8px;
  background: var(--marker);
  border: 1.5px solid var(--ink);
  font: 500 .85rem/1 var(--font-mono);
}
.principle h4 { font-size: 1.2rem; margin-bottom: 6px; }
.principle p { color: var(--ink-2); font-size: .98rem; }

/* ---------- Ejemplo (simulación) ---------- */
.sim {
  border: 1.5px solid var(--ink);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
}
@media (max-width: 599px) { .sim { box-shadow: 5px 5px 0 var(--ink); } }
.sim__top {
  padding: clamp(16px, 2.5vw, 24px);
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper);
}
.sim__controls { display: flex; align-items: center; gap: 8px; }
.sim__weeks {
  display: flex;
  flex: 1;
  gap: 6px;
  min-width: 0;
}
.sim__week, .sim__nav {
  flex: 1;
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: 500 .88rem/1 var(--font-mono);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.sim__nav { flex: none; font-size: 1.1rem; }
@media (max-width: 479px) { .sim__nav { display: none; } }
.sim__week:hover, .sim__nav:hover { background: var(--marker-soft); }
.sim__week[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.sim__nav[aria-disabled="true"] { opacity: .35; cursor: not-allowed; background: var(--card); }

.sim__track { margin: 22px 6px 6px; }
.sim__line {
  position: relative;
  height: 4px;
  margin: 0 calc(100% / 12);
  border-radius: 4px;
  background: var(--line-strong);
}
.sim__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 0) * 100%);
  border-radius: 4px;
  background: var(--ink);
  transition: width .6s var(--ease);
}
.sim__nodes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin: -12px 0 0;
  padding: 0;
  list-style: none;
}
.sim__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font: 500 .66rem/1.2 var(--font-mono);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}
.sim__node i {
  width: 20px; height: 20px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  transition: background-color .3s, transform .3s var(--ease);
}
.sim__node.is-done i { background: var(--ink); }
.sim__node.is-current i { background: var(--marker); transform: scale(1.25); }
.sim__node.is-current { color: var(--ink); }
.sim__node--alert i { border-color: var(--coral-ink); }
.sim__node--alert.is-current i { background: var(--coral); }
.sim__node--flag i { border-radius: 4px; }
@media (max-width: 599px) { .sim__node span { display: none; } }

.stack { margin-top: 18px; }
.stack__label {
  margin: 0 0 8px;
  font: 500 .72rem/1.2 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.stack__bar {
  display: flex;
  height: 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--card);
}
.stack__seg { height: 100%; transition: width .7s var(--ease); }
.stack__seg + .stack__seg { box-shadow: inset 1.5px 0 0 var(--ink); }
.stack__seg--todo, .sw--todo { background: repeating-linear-gradient(-45deg, #E3DDCD 0 4px, #F2EEE3 4px 8px); }
.stack__seg--doing, .sw--doing { background: var(--sky); }
.stack__seg--done, .sw--done { background: var(--marker); }
.stack__seg--blocked, .sw--blocked { background: var(--coral); }
.stack__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
}
.stack__legend li { display: inline-flex; align-items: center; gap: 6px; }
.stack__legend b { font: 500 .88rem/1 var(--font-mono); }
.sw { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink); }

.sim__panel {
  display: grid;
  gap: 28px;
  padding: clamp(20px, 3.5vw, 40px);
}
.sim__panel:focus-visible { outline-offset: -6px; }
@media (min-width: 900px) { .sim__panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; } }
.js .sim__panel { animation: panelIn .45s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } }
.no-js .sim__controls { display: none; }
.no-js .sim__panel + .sim__panel { border-top: 1.5px solid var(--ink); }

.sim__kicker {
  margin: 0 0 8px;
  font: 500 .74rem/1.2 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.alert-text { color: var(--coral-ink); font-weight: 500; }
.sim__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.03em; margin-bottom: 20px; }
.sim__block { margin-top: 16px; }
.sim__block h4 {
  margin: 0 0 4px;
  font: 500 .72rem/1.2 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sim__block p { color: var(--ink-2); }
.sim__block--do {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--marker-soft);
  border: 1px solid var(--marker-deep);
}
.sim__block--do p { color: var(--ink); }

.report {
  align-self: start;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  overflow: hidden;
}
.report__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px dashed var(--line-strong);
}
.report__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--marker);
  border: 1.5px solid var(--ink);
  font: 700 1rem/1 var(--font-display);
}
.report__title { margin: 0; font-weight: 600; }
.report__to { margin: 0; font: 400 .75rem/1.3 var(--font-mono); color: var(--ink-3); }
.report__list { margin: 0; padding: 6px 18px 16px; }
.report__list > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.report__list > div:last-child { border-bottom: 0; }
.report__list dt {
  margin-bottom: 2px;
  font: 500 .7rem/1.2 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.report__list dd { margin: 0; }
.report__list .is-decision {
  margin: 4px -10px 0;
  padding: 10px;
  border-radius: 10px;
  background: var(--coral-soft);
  border-bottom: 0;
}
.report__list .is-decision dt { color: var(--coral-ink); }

/* ---------- Perfil ---------- */
.profile { display: grid; gap: 40px; align-items: start; }
@media (min-width: 980px) { .profile { grid-template-columns: minmax(0, 4.3fr) minmax(0, 6fr); gap: 56px; } }
.profile__top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 22px 28px; margin-bottom: 28px; }
/* Retrato en viñeta: encuadre 4:5 centrado en la cara */
.photo {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(180px, 20vw, 228px);
  aspect-ratio: 4 / 5;
  margin: 0 0 0 4px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background-color: var(--marker);
  background-image: radial-gradient(rgba(21, 21, 26, .15) 22%, transparent 24%);
  background-size: 9px 9px;
  box-shadow: 8px 8px 0 var(--pop-pink), 8px 8px 0 2.5px var(--ink);
  transform: rotate(-2deg);
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 9.5px;
  object-fit: cover;
  object-position: 50% 30%;
}
.photo__initial { font: 800 5rem/1 var(--font-display); letter-spacing: -.04em; }
.photo__tag {
  position: absolute;
  left: -16px;
  bottom: 18px;
  z-index: 1;
  padding: .38em .65em .26em;
  border: 2.5px solid var(--ink);
  border-radius: 8px;
  background: var(--pop-yellow);
  box-shadow: 3px 3px 0 var(--ink);
  font: 400 1.3rem/1 var(--font-pop);
  letter-spacing: .06em;
  transform: rotate(-8deg);
}
.photo.is-pending { border-style: dashed; }
.avatar__hint {
  margin: -8px 0 16px;
  font: 500 .76rem/1.4 var(--font-mono);
  color: var(--coral-ink);
}
.profile__id { flex: 1 1 220px; min-width: 0; }
.profile__claim { margin: 12px 0 0; font: 700 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.3 var(--font-display); max-width: 26ch; }
.assets { display: grid; gap: 10px; margin: 22px 0; padding: 0; list-style: none; }
.assets li {
  position: relative;
  padding: 12px 14px 12px 56px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink-2);
}
.assets b { display: block; font: 700 1.02rem/1.3 var(--font-display); color: var(--ink); }
.assets__icon {
  position: absolute;
  left: 12px; top: 12px;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--marker);
  font: 400 1rem/1 var(--font-pop);
  color: var(--ink);
}
.assets li:nth-child(2) .assets__icon { background: var(--pop-pink); }
.assets li:nth-child(3) .assets__icon { background: var(--pop-yellow); }
.profile__tools { max-width: 52ch; font-weight: 500; color: var(--ink-2); }
.profile__name { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); letter-spacing: -.035em; margin-bottom: 4px; }
.profile__role {
  margin-bottom: 0;
  font: 500 .8rem/1.3 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.profile__intro > p:not([class]) { color: var(--ink-2); max-width: 52ch; }
.profile__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.dossier {
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  box-shadow: 8px 8px 0 var(--ink);
  overflow: hidden;
}
@media (max-width: 599px) { .dossier { box-shadow: 5px 5px 0 var(--ink); } }
.dossier__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--ink);
  color: var(--paper);
}
.dossier__title { margin: 0; font: 700 1.2rem/1.2 var(--font-display); }
.dossier__id { margin: 0; font: 500 .72rem/1 var(--font-mono); letter-spacing: .08em; color: var(--marker); }
.dossier__list { margin: 0; }
.dossier__row {
  display: grid;
  gap: 4px 20px;
  padding: 16px 22px;
  border-top: 1px dashed var(--line-strong);
}
.dossier__row:first-child { border-top: 0; }
@media (min-width: 560px) { .dossier__row { grid-template-columns: 148px minmax(0, 1fr); } }
.dossier__row dt {
  padding-top: 3px;
  font: 500 .72rem/1.4 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dossier__row dd { margin: 0; }
.dossier__row dd ul { margin: 0; padding-left: 1.1em; }
.dossier__row dd .chips, .dossier__row dd .plain, .dossier__row dd .trayecto { padding: 0; list-style: none; }
.plain li + li { margin-top: 4px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: .3em .7em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  font-size: .9rem;
}
.trayecto { margin: 0; padding: 0; list-style: none; }
.trayecto li + li { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.trayecto__periodo { display: block; font: 500 .74rem/1.3 var(--font-mono); color: var(--ink-3); }
.trayecto__rol { display: block; font-weight: 600; }
.trayecto__desc { display: block; color: var(--ink-2); font-size: .95rem; }

.pending {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 6px 10px;
  border: 1.5px dashed rgba(168, 58, 20, .55);
  border-radius: 10px;
  background: rgba(255, 217, 203, .35);
  color: var(--coral-ink);
  font-size: .92rem;
}
.pending__label { font: 600 .7rem/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }

.onboarding { margin-top: clamp(56px, 8vw, 96px); }
.onboarding__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); max-width: 30ch; margin-bottom: 24px; }
.onboarding__steps {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
@media (min-width: 820px) { .onboarding__steps { grid-template-columns: repeat(3, 1fr); } }
.onboarding__steps li {
  position: relative;
  padding: 22px;
  border-top: 4px solid var(--ink);
  background: var(--card);
  border-radius: 4px 4px 16px 16px;
  counter-increment: paso;
}
.onboarding__steps li::before {
  content: "0" counter(paso);
  position: absolute;
  top: 18px; right: 20px;
  font: 500 .8rem/1 var(--font-mono);
  color: var(--ink-3);
}
.onboarding__when {
  width: fit-content;
  margin-bottom: 10px;
  padding: .25em .6em;
  border-radius: 6px;
  background: var(--marker);
  font: 500 .7rem/1.2 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.onboarding__steps h4 { font-size: 1.25rem; margin-bottom: 6px; }
.onboarding__steps p:last-child { color: var(--ink-2); }
.onboarding__note { margin-top: 18px; font-size: .95rem; color: var(--ink-3); }

/* ---------- Preguntas ---------- */
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 22px 4px;
  list-style: none;
  cursor: pointer;
  font: 600 clamp(1.08rem, 1rem + .5vw, 1.3rem)/1.3 var(--font-display);
  border-radius: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 30px; height: 30px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transition: transform .3s var(--ease), background-color .3s;
}
.faq summary:hover::after { background-color: var(--marker-soft); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--marker); }
.faq__a { padding: 0 4px 24px; max-width: 66ch; color: var(--ink-2); }

/* ---------- Contacto ---------- */
.contact__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 980px) { .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; } }
.channels { display: grid; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.channels li:has(> .channel[hidden]) { display: none; }
.channel-row { display: flex; gap: 10px; }
.channel-row .channel { flex: 1; min-width: 0; }
.channel__copy {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  min-width: 76px;
  padding: 10px 12px;
  border: 1px solid var(--night-line);
  border-radius: 16px;
  background: var(--night-2);
  color: var(--night-text);
  font: 500 .7rem/1 var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.channel__copy svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.channel__copy:hover { border-color: var(--marker); }
.channel__copy.is-ok { background: var(--marker); border-color: var(--marker); color: var(--ink); }
.channel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--night-line);
  border-radius: 16px;
  background: var(--night-2);
  color: var(--night-text);
  text-decoration: none;
  transition: border-color .2s, transform .2s var(--ease);
}
a.channel[href]:hover { border-color: var(--marker); transform: translateX(4px); }
.channel__label {
  font: 500 .7rem/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--night-muted);
}
.channel__value { font: 600 1.15rem/1.3 var(--font-display); overflow-wrap: anywhere; }
.channel.is-pending { border-style: dashed; cursor: not-allowed; }
.channel.is-pending .channel__value { color: var(--night-muted); }
.channel .badge-pending { margin-left: 0; width: fit-content; }

.composer {
  position: relative;
  padding: clamp(22px, 3vw, 36px);
  border: 2.5px solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--marker);
}
@media (max-width: 599px) { .composer { box-shadow: 6px 6px 0 var(--marker); } }
.composer :focus-visible { outline-color: var(--ink); }
.composer__title { margin-bottom: 6px; font: 400 clamp(1.9rem, 1.55rem + 1vw, 2.4rem)/1 var(--font-pop); letter-spacing: .05em; }
.composer__mode { margin: 0 0 22px; font-size: .95rem; color: var(--ink-2); }
/* Compromiso de tiempo de respuesta, como pegatina */
.composer__sla {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
  padding: .45em .85em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--pop-yellow);
  box-shadow: 3px 3px 0 var(--ink);
  font: 600 .95rem/1.2 var(--font-display);
  transform: rotate(-1.5deg);
}
.composer__sla svg {
  flex: none;
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.composer__sla b { font-weight: 800; }
.field { display: grid; gap: 6px; margin: 0 0 16px; min-width: 0; }
.field-row { display: grid; gap: 0 16px; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field > label, .field > legend { font-weight: 600; font-size: .95rem; }
.req { color: var(--coral-ink); }
.opt { font-weight: 400; color: var(--ink-3); }
.input {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  box-shadow: 3px 3px 0 rgba(21, 21, 26, .16);
  transition: box-shadow .2s, background-color .2s;
}
.input:hover { box-shadow: 3px 3px 0 var(--ink); }
.input:focus { outline: 3px solid var(--ink); outline-offset: 2px; background: #FFFDF2; box-shadow: 4px 4px 0 var(--marker); }
.input[aria-invalid="true"] { border-color: var(--coral-ink); box-shadow: 3px 3px 0 var(--pop-pink); }
textarea.input { min-height: 132px; resize: vertical; line-height: 1.5; }
select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 16px 16px no-repeat;
}
.field__hint { margin: 0; font-size: .86rem; color: var(--ink-3); }
.field__error { margin: 0; font-size: .9rem; font-weight: 500; color: var(--coral-ink); }
.field__error::before { content: "! "; font-weight: 700; }

.segmented, .tags { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; }
.segmented legend, .tags legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-weight: 600; font-size: .95rem; }
.segmented label, .tag { position: relative; cursor: pointer; }
.segmented input, .tag input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5em 1em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  transition: background-color .2s, box-shadow .2s;
}
.segmented label:hover span { box-shadow: 2px 2px 0 var(--ink); }
.segmented input:checked + span { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--marker); }
.segmented input:focus-visible + span, .tag input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
.tags { margin-bottom: 18px; }
.tag span {
  --r: -1deg;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: .4em .8em;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--pop-pink-soft);
  font-size: .9rem;
  font-weight: 600;
  transform: rotate(var(--r));
  transition: background-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.tag:nth-of-type(even) span { --r: 1deg; }
.tag span::before { content: "+"; font-weight: 700; }
.tag:hover span { box-shadow: 2px 2px 0 var(--ink); }
.tag input:checked + span { background: var(--marker); transform: rotate(0deg); box-shadow: 2px 2px 0 var(--ink); }
.tag input:checked + span::before { content: "✓"; }
.botcheck { display: none !important; }

.composer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.btn--big { min-height: 56px; padding: .8em 1.6em; font-size: 1.08rem; box-shadow: 4px 4px 0 var(--pop-pink); }
.btn--big:hover { box-shadow: 6px 6px 0 var(--pop-pink); }
.btn.is-loading { cursor: progress; }
.btn.is-loading .btn__icon { animation: vuela .5s ease-in-out infinite alternate; }
@keyframes vuela { to { transform: translate(3px, -3px); } }
.composer .status-msg { color: var(--ink); }
.composer .status-msg.is-error { color: var(--coral-ink); }
.composer .status-msg a { color: inherit; font-weight: 700; }

.composer__done { padding: 18px 0 8px; text-align: center; }
.composer__done:focus { outline: none; }
.composer__done p:not([class]) { max-width: 40ch; margin: 0 auto 20px; color: var(--ink-2); }
.composer__burst {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 170px; height: 170px;
  margin: 0 auto 10px;
  filter: drop-shadow(2.5px 0 0 var(--ink)) drop-shadow(-2.5px 0 0 var(--ink)) drop-shadow(0 2.5px 0 var(--ink)) drop-shadow(0 -2.5px 0 var(--ink)) drop-shadow(4px 4px 0 var(--ink));
}
.composer__burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marker);
  clip-path: polygon(100% 50%, 84.8% 59.3%, 93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%, 50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%, 6.7% 75%, 15.2% 59.3%, 0 50%, 15.2% 40.7%, 6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%, 50% 0, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%, 93.3% 25%, 84.8% 40.7%);
}
.composer__burst span { position: relative; font: 400 1.8rem/1 var(--font-pop); letter-spacing: .04em; transform: rotate(-9deg); }
.composer__done.is-in .composer__burst { animation: scorePop .6s var(--ease); }

/* Botón flotante de contacto en móvil */
.float-cta {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 65;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-height: 52px;
  padding: .1em 22px 0;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--marker);
  color: var(--ink);
  font: 400 1.3rem/1 var(--font-pop);
  letter-spacing: .06em;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .35s var(--ease), opacity .3s, visibility 0s;
}
.float-cta.is-off {
  visibility: hidden;
  opacity: 0;
  transform: translateY(140%);
  transition: transform .35s var(--ease), opacity .3s, visibility 0s .35s;
}
@media (min-width: 960px) { .float-cta { display: none !important; } }

/* ---------- Pie ---------- */
.footer { padding: clamp(56px, 8vw, 96px) 0 40px; overflow: hidden; }
.footer__word {
  margin: 0 0 28px -.04em;
  font: 800 clamp(4.2rem, 1rem + 17vw, 15rem)/.82 var(--font-display);
  letter-spacing: -.055em;
}
.footer__word span { color: var(--marker-deep); }
.footer__word .letra {
  display: inline-block;
  color: inherit;
  transition: scale .3s cubic-bezier(.3, 1.7, .5, 1), color .2s;
}
.footer__word .letra:last-child { color: var(--marker-deep); }
.footer__word .letra:hover { scale: 1.12; color: var(--pop-pink); }
/* Una ola recorre la firma cada pocos segundos, sola (salvo con «reducir movimiento») */
@media (prefers-reduced-motion: no-preference) {
  .footer__word.is-vivo .letra {
    animation: ola 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * .09s);
  }
}
@keyframes ola {
  0%, 26%, 100% { transform: none; text-shadow: none; }
  8% { transform: translateY(-.13em) rotate(-7deg); text-shadow: .045em .045em 0 var(--pop-pink); }
  16% { transform: translateY(.02em) rotate(2deg); text-shadow: .02em .02em 0 var(--pop-pink); }
}

/* ---------- Estallidos y confeti (efectos de cómic) ---------- */
.boom {
  --s: 120px;
  position: fixed;
  z-index: 90;
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  pointer-events: none;
}
.boom svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.boom b {
  position: relative;
  font: 400 calc(var(--s) * .2)/1 var(--font-pop);
  letter-spacing: .03em;
  color: var(--ink);
  white-space: nowrap;
  transform: rotate(-9deg);
}
.confeti {
  position: fixed;
  z-index: 89;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--ink);
  pointer-events: none;
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1.5px solid var(--ink);
}
.footer__row > p { margin: 0; font-weight: 500; }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
}
.footer__links a:hover { background: var(--marker); }
.footer__small { margin-top: 12px; max-width: 70ch; font-size: .86rem; color: var(--ink-3); }

/* ---------- Aviso de borrador ---------- */
.draft {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: min(400px, calc(100vw - 32px));
}
.draft__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--marker);
  color: var(--ink);
  font: 500 .8rem/1 var(--font-mono);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
.draft__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); border: 1px solid var(--ink); }
.draft__panel {
  max-height: min(60vh, 460px);
  overflow: auto;
  padding: 18px;
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 6px 6px 0 var(--ink);
  font-size: .92rem;
}
.draft__title { font-weight: 700; margin-bottom: 6px; }
.draft__list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.draft__list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--paper);
}
.draft__list small { font-family: var(--font-mono); color: var(--ink-3); }
.draft__hide { margin-top: 12px; font-size: .88rem; }
@media (max-width: 599px) {
  .draft { left: 10px; bottom: 10px; }
  .draft__pill { min-height: 38px; padding: 0 12px; font-size: .72rem; }
}
#contenido:focus { outline: none; }

/* ---------- Aparición al hacer scroll ---------- */
/* Usa «translate» y «rotate» para no pisar el «transform» de los efectos al pasar el ratón. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition:
      opacity .8s var(--ease),
      translate .8s var(--ease),
      rotate .8s var(--ease),
      transform .3s var(--ease),
      box-shadow .3s var(--ease),
      border-color .3s;
  }
  .js [data-reveal]:not(.is-in) { opacity: 0; translate: 0 26px; }
  .js .card[data-reveal]:not(.is-in) { translate: 0 48px; rotate: -5deg; }
  .js .card[data-reveal]:nth-child(4n+2) { transition-delay: .08s; }
  .js .card[data-reveal]:nth-child(4n+3) { transition-delay: .16s; }
  .js .card[data-reveal]:nth-child(4n+4) { transition-delay: .24s; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---------- Impresión ---------- */
@media print {
  .topbar, .skip, .draft, .float-cta, .switch, .method__hoy, .comic__foot, .comic__hint, .comic__score, .composer, .sim__controls, .bands, .cards__tools, button.card__btn { display: none !important; }
  body { background: #fff; }
  .card__inner { display: block !important; transform: none !important; }
  .card__face--back { margin-top: 12px; transform: none !important; }
  .prob { transform: none !important; }
  .prob__face { grid-area: auto !important; opacity: 1 !important; transform: none !important; }
  .section--night { background: #fff; color: #000; }
  .section--night .lead, .service__for, .service__format { color: #333; }
  [data-reveal] { opacity: 1 !important; translate: none !important; rotate: none !important; }
  .sim__panel[hidden] { display: grid !important; }
}