/* /prueba-1m-usd-page — reglas mínimas para montar el copy del docx sobre
   manifestation.css. El estilo definitivo se define después. */

/* Fondo del documento negro (manifestation.css lo pone rojo): Safari iOS tiñe
   la barra de estado y el toolbar con este color, y el hero es negro. */
html,
body {
  background: var(--ink);
}

/* ---- glitch del titular del hero ----
   Dos copias del texto (spans .glitch__c con el mismo markup, así el NOT en
   Leo alinea) recortadas en franjas y desplazadas, en rojo y crema sobre el
   negro del hero; el texto original parpadea con un halo de aberración
   cromática. Ráfagas cortas, el resto del ciclo en reposo. */
.glitch {
  --g1: var(--red);
  --g2: var(--paper);
  position: relative;
  animation: glitch-flicker 5s steps(1, end) infinite;
}

.glitch__c {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(50% 0 50% 0);
  animation-duration: 5s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.glitch__c .leo { color: inherit; }

.glitch__c--a {
  color: var(--g1);
  animation-name: glitch-a;
}

.glitch__c--b {
  color: var(--g2);
  animation-name: glitch-b;
  animation-delay: 0.12s;
}

/* NOT del titular: sin agrandar el renglón del h1 */
.glitch .leo { line-height: 0.6; }

/* hero en negro puro (el resto de las bandas s-ink siguen en --ink #121212) */
.hero.s-ink { background: #000; }

@keyframes glitch-a {
  0%, 100% { clip-path: inset(50% 0 50% 0); transform: none; }
  2%  { clip-path: inset(10% 0 78% 0); transform: translate(-7px, 0); }
  4%  { clip-path: inset(62% 0 22% 0); transform: translate(6px, 0); }
  6%  { clip-path: inset(34% 0 52% 0); transform: translate(-5px, 1px); }
  8%  { clip-path: inset(82% 0 4% 0);  transform: translate(7px, 0); }
  10% { clip-path: inset(50% 0 50% 0); transform: none; }
  56% { clip-path: inset(42% 0 44% 0); transform: translate(8px, -1px); }
  58% { clip-path: inset(4% 0 86% 0);  transform: translate(-6px, 0); }
  60% { clip-path: inset(70% 0 12% 0); transform: translate(5px, 0); }
  62% { clip-path: inset(50% 0 50% 0); transform: none; }
}

@keyframes glitch-b {
  0%, 100% { clip-path: inset(50% 0 50% 0); transform: none; }
  2%  { clip-path: inset(70% 0 14% 0); transform: translate(6px, 0); }
  4%  { clip-path: inset(18% 0 66% 0); transform: translate(-7px, -1px); }
  6%  { clip-path: inset(50% 0 36% 0); transform: translate(5px, 0); }
  8%  { clip-path: inset(0 0 88% 0);   transform: translate(-6px, 0); }
  10% { clip-path: inset(50% 0 50% 0); transform: none; }
  56% { clip-path: inset(8% 0 80% 0);  transform: translate(-8px, 0); }
  58% { clip-path: inset(58% 0 26% 0); transform: translate(6px, 1px); }
  60% { clip-path: inset(30% 0 60% 0); transform: translate(-5px, 0); }
  62% { clip-path: inset(50% 0 50% 0); transform: none; }
}

@keyframes glitch-flicker {
  0%, 100% { text-shadow: none; }
  2%  { text-shadow: -3px 0 var(--g1), 3px 0 var(--g2); }
  5%  { text-shadow: 3px 0 var(--g1), -3px 0 var(--g2); }
  7%  { text-shadow: none; }
  9%  { text-shadow: -2px 0 var(--g1), 2px 0 var(--g2); }
  10% { text-shadow: none; }
  56% { text-shadow: 4px 0 var(--g1), -4px 0 var(--g2); }
  59% { text-shadow: -3px 0 var(--g1), 3px 0 var(--g2); }
  62% { text-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .glitch { animation: none; }
  .glitch::before,
  .glitch::after { display: none; }
}

.copy-img {
  display: block;
  width: min(100%, 560px);
  height: auto;
  margin: clamp(20px, 3.5vh, 32px) 0 clamp(24px, 4vh, 40px);
}

.copy-img.sm {
  width: min(100%, 380px);
}

/* ---- barra roja sticky con countdown (después del hero) ---- */
.timer-bar {
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 9px 16px 8px;
  background: var(--red);
  color: var(--paper);
  border-bottom: 3px solid var(--ink);
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(13px, 1.9vw, 16px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
}

.timer-bar__count {
  font-size: 1.6em;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}

/* línea secundaria: mismo peso, cuerpo más chico */
.line.sm {
  font-size: clamp(17px, 2.8vw, 26px);
  margin-top: -6px;
}

/* botón "Back" visible en la barra del form (en vez de la flecha sola), con el
   mismo trazo a mano que los demás botones: crema con borde de tinta y sombra roja */
#funnel .funnel__back {
  --sk-btn-red: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 100' preserveAspectRatio='none'><path d='M31.2 7.7C37.8 7.2 47.9 7 56.8 6.8C65.7 6.6 74.4 6.8 84.5 6.6C94.5 6.4 106.7 6.1 117.1 5.7C127.5 5.3 137.3 4 146.9 4.3C156.5 4.6 165.4 7.8 174.6 7.5C183.9 7.3 191.3 2.7 202.5 2.9C213.7 3 233.6 6.1 241.9 8.4C250.2 10.8 250 13.4 252.3 17.2C254.6 21 256 20.9 255.6 31.4C255.2 41.9 251.9 70.4 249.8 80.2C247.8 89.9 246.7 87.8 243.1 89.7C239.6 91.6 235.5 90.3 228.5 91.6C221.6 92.8 210.8 97.2 201.2 97.1C191.7 97.1 180.3 92 171.2 91.3C162.1 90.6 155.9 91.9 146.5 92.8C137.2 93.8 125.3 97 115.1 97.1C105 97.2 95.4 93.4 85.7 93.3C76 93.1 67.9 96.5 56.8 96.4C45.6 96.2 26.8 94.4 18.9 92.2C10.9 90 11.2 87.3 9.3 83.2C7.3 79.1 6.9 78.5 7 67.7C7 56.9 8 27.9 9.7 18.3C11.5 8.7 13.7 12 17.3 10.3C20.9 8.5 24.6 8.3 31.2 7.7Z' fill='%23e4002b' stroke='%23e4002b' stroke-width='3' stroke-linejoin='round' vector-effect='non-scaling-stroke'/></svg>");
  width: auto;
  height: 38px;
  gap: 2px;
  padding: 2px 16px 0 10px;
  border: 0;
  border-radius: 0;
  background: var(--sk-btn-paper-ink) 0 0 / 100% 100% no-repeat, var(--sk-btn-red) 4px 4px / 100% 100% no-repeat;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#funnel .funnel__back:hover {
  color: var(--red);
  background: var(--sk-btn-paper-red) 0 0 / 100% 100% no-repeat, var(--sk-btn-red) 4px 4px / 100% 100% no-repeat;
}

/* "Yes" bajo NOT YET: área de toque grande (≥48px) sin cambiar lo que se ve */
#funnel .funnel__minor--center { padding: 16px 40px; margin-top: 12px; min-height: 48px; }

/* CTA de la TYP en minúsculas, como "i want mine" */
#funnel .funnel__btn--lower { text-transform: none; }
/* caja "Team test" (solo con ?test=true): pedido sin pago */
#funnel .funnel__test { margin-top: 28px; padding: 14px 16px 4px; border: 2px dashed var(--ink); border-radius: 12px; }
#funnel .funnel__test .funnel__p { margin-bottom: 10px; }
/* CTA de pago a todo el ancho en celular */
@media (max-width: 699px) {
  #funnel .funnel__btn[data-pay] { width: 100%; margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; }
}

/* "Careful." más grande */
#funnel .funnel__screen[data-key="caution"] .funnel__h { font-size: clamp(40px, 9vw, 64px); }
#funnel .funnel__screen[data-key="caution"] .funnel__p { font-size: clamp(19px, 2.8vw, 23px); }
/* "can come true": Leo más grande y pegada a la línea de arriba */
#funnel .funnel__screen[data-key="caution"] .funnel__p.em { line-height: 1.05; }
#funnel .funnel__screen[data-key="caution"] .funnel__p.em .leo { font-size: 2.3em; line-height: 0.7; }

/* aclaración debajo del campo "name" (pantalla de contacto) */
#funnel .funnel__hint { margin: -2px 0 8px; }

/* ejemplos del form con el estilo de la lista garabateada de la landing
   (Leo en bold, flecha roja dibujada, leve rotación); los tips del thank-you no */
#funnel .funnel__screen:not(.thankyou) .funnel__tips li {
  padding-left: 1.35em;
  margin-bottom: 12px;
  font-family: "Leo Hates School", var(--sans);
  font-weight: 600;
  font-size: clamp(26px, 3.8vw, 32px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 0.018em currentColor; /* Leo tiene un solo peso: el "600" es un trazo más fino que el de .leo */
}
#funnel .funnel__screen:not(.thankyou) .funnel__tips li::before {
  content: "";
  top: 0.12em;
  width: 1.05em;
  height: 0.75em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44' fill='none' stroke='%23e4002b' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 24c14-3 27-2 41 0'/%3E%3Cpath d='M46 23c4 1 8 1 12 1'/%3E%3Cpath d='M44 10c6 5 10 9 16 13-6 4-10 7-15 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
#funnel .funnel__screen:not(.thankyou) .funnel__tips li:nth-child(odd) { rotate: -0.6deg; }
#funnel .funnel__screen:not(.thankyou) .funnel__tips li:nth-child(even) { rotate: 0.5deg; }
#funnel .funnel__tips-brand { -webkit-text-stroke: 0; }

/* ---- player de Steph en la pantalla Careful: onda de barras ---- */
.sample__wave {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  height: 24px;
  cursor: pointer;
}

.sample__wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.15s ease;
}

.sample__wave i.on { background: var(--red); }

.sample__time {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
}

/* hero ("You should NOT be here." + líneas) en monoespaciada tipo máquina de
   escribir: Courier Prime (self-hosted, subset latin de Google Fonts). Las
   palabras Leo se mantienen. */
@font-face {
  font-family: "Courier Prime";
  src: url("assets/fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("assets/fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.hero .h-xl,
.hero .line {
  font-family: "Courier Prime", "Courier New", Courier, ui-monospace, monospace;
  letter-spacing: 0;
}
.hero .h-xl { font-weight: 700; }
/* ritmo regular/bold: las líneas van en regular; en bold las .em, los <strong> y lo subrayado */
.hero .line { font-weight: 400; }
.hero .line.em,
.hero .line strong,
.hero .line .u { font-weight: 700; }
/* línea en regular fuera del hero ("Enjoy the unexplainable.") */
.line.light { font-weight: 400; }
.line.light .red { font-weight: 700; }

/* cierre ("Not everyone reads this far.") en Libre Caslon Condensed (self-hosted,
   subset latin de Google Fonts); el botón y las palabras Leo no cambian */
@font-face {
  font-family: "Libre Caslon Condensed";
  src: url("assets/fonts/libre-caslon-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Condensed";
  src: url("assets/fonts/libre-caslon-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Condensed";
  src: url("assets/fonts/libre-caslon-condensed-400i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Condensed";
  src: url("assets/fonts/libre-caslon-condensed-700i.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

.serif .h-lg,
.serif .line {
  font-family: "Libre Caslon Condensed", Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

/* el cierre es una carta: hoja crema cálida con trazo a mano y sombra roja,
   texto a la izquierda, ritmo regular / bold / cursiva */
.serif .letter {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px) clamp(22px, 5vw, 44px) clamp(26px, 4vw, 40px);
  --r: 18px 12px 20px 10px / 12px 20px 10px 18px;
  border-radius: var(--r);
  background: #fff8ea;
  color: var(--ink);
  rotate: -0.8deg;
}
.serif .letter::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--ink);
  border-radius: var(--r);
  box-shadow: 6px 6px 0 var(--red);
  transform: translate(2px, -2px);
  filter: url("#sketch");
  pointer-events: none;
}
.serif .h-lg {
  font-size: clamp(30px, 5vw, 50px);
  margin-bottom: clamp(16px, 3vh, 26px);
}
.serif .line {
  max-width: none;
  margin: 0 0 0.85em;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400;
  line-height: 1.3;
}
.serif .line.em,
.serif .line strong { font-weight: 700; }
.serif .line.soft { font-style: italic; }
.serif .letter .gap { height: 14px; }
.serif .letter .btn { display: block; width: max-content; margin: 1.4em auto 0; }

/* en el cierre, las palabras marcadas van en la misma serif (sin Leo), solo en rojo */
.serif .leo {
  font-family: inherit;
  font-size: 1em;
  font-weight: inherit;
  line-height: inherit;
  text-transform: uppercase;
}

/* FAQ y cierre son dos bandas seguidas: menos aire entre la última caja y la carta */
.section:has(.faq) { padding-bottom: clamp(36px, 6vh, 72px); }
.section.serif { padding-top: clamp(32px, 5vh, 56px); }

/* "Of course that conversation wasn't real." pegado a "(Was it?)" */
.h-lg.tight { margin-bottom: clamp(10px, 1.6vh, 16px); }
.line.tight { margin-bottom: 6px; }
.h-lg.md { font-size: clamp(26px, 4.6vw, 50px); }

/* pedidos "à la carte": globos a mano alternando lado (sección 5) */
.wishes {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vh, 18px);
  max-width: 620px;
  margin: clamp(6px, 1.5vh, 14px) 0 clamp(20px, 3vh, 30px);
}
.wish {
  --r: 18px 14px 20px 12px / 14px 20px 12px 18px;
  position: relative;
  align-self: flex-start;
  max-width: 82%;
  padding: clamp(12px, 2vh, 16px) clamp(18px, 3vw, 26px);
  border-radius: var(--r);
  background: var(--white);
  font-weight: 700;
  font-size: clamp(19px, 3vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  rotate: -0.6deg;
}
.wish:nth-child(even) {
  --r: 14px 20px 12px 18px / 20px 12px 18px 14px;
  align-self: flex-end;
  rotate: 0.6deg;
}
.wish::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--ink);
  border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--red);
  transform: translate(2px, -2px);
  filter: url("#sketch");
  pointer-events: none;
}
.wish .leo { line-height: 0.7; }
/* llegan de a uno como los mensajes del chat (mismo script, misma transición) */
.wish {
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.wish.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wish { opacity: 1; transform: none; transition: none; }
}

/* mock de notificación push ("Your manifestation is ready.") en la banda negra */
.push {
  display: flex;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  align-items: flex-start;
  gap: 12px;
  max-width: 420px;
  margin: 4px 0 clamp(18px, 3vh, 28px);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  color: var(--paper);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  rotate: -1deg;
}
.push__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--red); }
.push__body { flex: 1; min-width: 0; }
.push__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.push__title { margin: 0; font-weight: 800; font-size: clamp(16px, 2.4vw, 19px); line-height: 1.2; }
.push__text { margin: 0; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.2; opacity: 0.9; }
/* entra con un "pop" (escala con rebote) en vez del fade del .reveal genérico */
.push.reveal {
  transform: translateY(16px) scale(0.8);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.push.reveal.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .push.reveal { transform: none; transition: none; }
}

/* lista "garabateada" (What's parked outside???): ítems en Leo, flecha roja
   dibujada a mano como viñeta y leve rotación alternada */
.scribble {
  list-style: none;
  margin: clamp(18px, 3vh, 30px) 0 clamp(14px, 2.4vh, 26px);
  padding: 0;
  max-width: 38ch;
}
.scribble li {
  position: relative;
  padding-left: 1.35em;
  margin-bottom: clamp(10px, 1.8vh, 18px);
  font-family: "Leo Hates School", var(--sans);
  font-weight: 600;
  font-size: clamp(27px, 4.8vw, 46px);
  line-height: 1.05;
  letter-spacing: 0;
  -webkit-text-stroke: 0.018em currentColor; /* Leo tiene un solo peso: "600" = trazo más fino que .leo (0.035em) */
}
.scribble li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 1.05em;
  height: 0.75em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 44' fill='none' stroke='%23e4002b' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 24c14-3 27-2 41 0'/%3E%3Cpath d='M46 23c4 1 8 1 12 1'/%3E%3Cpath d='M44 10c6 5 10 9 16 13-6 4-10 7-15 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.scribble li:nth-child(odd) { rotate: -0.6deg; }
.scribble li:nth-child(even) { rotate: 0.5deg; }
.scribble .leo { font-size: 1em; }

.caption {
  font-weight: 400;
  font-style: italic;
  opacity: 0.7;
  font-size: clamp(14px, 1.8vw, 18px);
  margin: -14px 0 clamp(24px, 4vh, 40px);
}

/* ---- diálogo Universo / Steph: chat bubbles estilo iMessage ----
   Universo = gris a la izquierda (el que escribe), Steph = azul a la derecha
   (la lectora). Colita con el truco clásico de dos pseudo-elementos: un
   cuarto de círculo del color de la burbuja y otro del color del fondo que
   lo recorta. El remitente va como caption chica gris arriba de cada racha,
   como en los grupos de iMessage. */
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
  margin-top: clamp(8px, 1.5vh, 16px);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans);
}

.bubble {
  --bg: #e9e9eb;
  position: relative;
  max-width: 78%;
  padding: 10px 15px 11px;
  border-radius: 20px;
  background: var(--bg);
  color: #000;
  /* llegan de a uno: la página les pone .in en cadena (ver script de la landing) */
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

.bubble.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .bubble { opacity: 1; transform: none; transition: none; }
}

/* colita (abajo, en el lado del remitente) */
.bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 22px;
  background: var(--bg);
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 22px;
  background: var(--white);
}

.bubble--u {
  align-self: flex-start;
  --bg: #e9e9eb;
  color: #000;
}

.bubble--u::before { left: -8px; border-bottom-right-radius: 16px 14px; }
.bubble--u::after { left: -10px; border-bottom-right-radius: 10px; }

.bubble--s {
  align-self: flex-end;
  --bg: #1b8cff;
  color: #fff;
}

.bubble--s::before { right: -8px; border-bottom-left-radius: 16px 14px; }
.bubble--s::after { right: -10px; border-bottom-left-radius: 10px; }

/* remitente: caption chica gris arriba de la burbuja, fuera de ella */
.bubble .who {
  position: absolute;
  bottom: 100%;
  left: 14px;
  margin-bottom: 3px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: #8e8e93;
}

.bubble--s .who { left: auto; right: 14px; }

/* la caption ocupa lugar: separar más las burbujas que la llevan */
.bubble:has(.who) { margin-top: 18px; }
.chat .bubble:first-child { margin-top: 14px; }

/* mensajes seguidos del mismo emisor: pegados y con colita solo en el último */
.bubble--cont { margin-top: -7px; }
.bubble:has(+ .bubble--cont)::before,
.bubble:has(+ .bubble--cont)::after { display: none; }

.bubble p {
  font-weight: 500;
  font-size: clamp(17px, 2.6vw, 22px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.bubble p:last-child { margin-bottom: 0; }

/* ---- "you thought:" — burbujas de pensamiento a mano ----
   Nube blanca de bordes irregulares (radios distintos por burbuja + filtro
   #sketch) con el trazo fuera de registro en rojo, y en vez de colita, tres
   círculos decrecientes que bajan hacia quien piensa. */
.thoughts {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4.6vh, 44px);
  max-width: 620px;
  margin: clamp(6px, 1.5vh, 14px) 0 clamp(18px, 3vh, 30px);
}

.thought {
  --r: 48% 52% 50% 50% / 62% 58% 42% 38%;
  --dx: 26px;
  position: relative;
  align-self: flex-start;
  max-width: 88%;
  padding: clamp(20px, 3vh, 30px) clamp(30px, 5vw, 48px) clamp(22px, 3.2vh, 32px);
  background: var(--white) radial-gradient(rgba(18, 18, 18, 0.1) 1px, transparent 1.6px) 0 0 / 7px 7px;
  border-radius: var(--r);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(19px, 3vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: center;
  transform: rotate(-1deg);
  margin-bottom: 30px; /* lugar para los círculos */
}

.thought:nth-child(2) {
  --r: 52% 48% 46% 54% / 40% 44% 56% 60%;
  align-self: flex-end;
  transform: rotate(0.9deg);
}

.thought:nth-child(3) {
  --r: 46% 54% 52% 48% / 56% 40% 60% 44%;
  margin-left: 6%;
  transform: rotate(-0.4deg);
}

/* trazo de tinta ondulado + copia roja corrida */
.thought::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--ink);
  border-radius: var(--r);
  box-shadow: 5px 5px 0 var(--red);
  transform: translate(2px, -2px);
  filter: url("#sketch");
  pointer-events: none;
}

/* tres círculos que bajan: blanco con borde de tinta y sombra roja corrida */
.thought::after {
  content: "";
  position: absolute;
  left: var(--dx);
  bottom: -40px;
  width: 70px;
  height: 50px;
  background:
    radial-gradient(circle at 48px 11px, var(--white) 0 9.5px, var(--ink) 10px 12.5px, transparent 13.5px),
    radial-gradient(circle at 24px 27px, var(--white) 0 6px, var(--ink) 6.5px 9px, transparent 10px),
    radial-gradient(circle at 8px 41px, var(--white) 0 3.5px, var(--ink) 4px 6.5px, transparent 7.5px),
    radial-gradient(circle at 52px 15px, var(--red) 0 12.5px, transparent 13.5px),
    radial-gradient(circle at 27px 30px, var(--red) 0 9px, transparent 10px),
    radial-gradient(circle at 10px 43px, var(--red) 0 6.5px, transparent 7.5px);
  filter: url("#sketch");
  pointer-events: none;
}

/* a la derecha bajan hacia el otro lado (la sombra roja sigue abajo-derecha) */
.thought:nth-child(2)::after {
  left: auto;
  right: var(--dx);
  background:
    radial-gradient(circle at 22px 11px, var(--white) 0 9.5px, var(--ink) 10px 12.5px, transparent 13.5px),
    radial-gradient(circle at 46px 27px, var(--white) 0 6px, var(--ink) 6.5px 9px, transparent 10px),
    radial-gradient(circle at 62px 41px, var(--white) 0 3.5px, var(--ink) 4px 6.5px, transparent 7.5px),
    radial-gradient(circle at 26px 15px, var(--red) 0 12.5px, transparent 13.5px),
    radial-gradient(circle at 49px 30px, var(--red) 0 9px, transparent 10px),
    radial-gradient(circle at 64px 43px, var(--red) 0 6.5px, transparent 7.5px);
}

.thought .leo { line-height: 0.7; }

.line s,
.h-lg s {
  text-decoration-thickness: 0.12em;
  opacity: 0.55;
}

/* "If you KNEW ___": tambor vertical (ver script). Las caras van apiladas en
   absoluto; la visible (.on) está de frente, la que se va (.off) gira hacia
   arriba y la que llega entra girando desde abajo. La altura la fija el script. */
.drum {
  display: block;
  position: relative;
  overflow: hidden;
  perspective: 700px;
  transition: height 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.drum__face {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: block;
  opacity: 0;
  transform: rotateX(90deg) translateY(45%);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
}
.drum__face.on { opacity: 1; transform: none; }
.drum__face.off { opacity: 0; transform: rotateX(-90deg) translateY(-45%); }
@media (prefers-reduced-motion: reduce) {
  .drum, .drum__face { transition: none; }
}

/* "Before you keep going…" (nota del docx: debe ir como advertencia) */
.warning {
  --r: 14px 10px 16px 8px / 10px 16px 8px 14px;
  position: relative;
  width: fit-content;
  max-width: min(100%, 40ch);
  padding: clamp(28px, 4vh, 38px) clamp(22px, 3.4vw, 34px) clamp(20px, 3vh, 30px);
  margin: clamp(24px, 4vh, 40px) 0 0;
  background: #ffd60a;
  color: var(--ink);
  border-radius: var(--r);
  rotate: -0.6deg; /* propiedad aparte: no pelea con el translateY de .reveal */
}

/* trazo de tinta ondulado con copia roja corrida */
.warning::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--ink);
  border-radius: var(--r);
  box-shadow: 5px 5px 0 var(--red);
  transform: translate(2px, -2px);
  filter: url("#sketch");
  pointer-events: none;
}

/* franja de peligro (rayas diagonales) en el borde superior */
.warning::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  height: 12px;
  border-radius: 10px 8px 0 0;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 9px, transparent 9px 18px);
  pointer-events: none;
}

/* en desktop la caja va más ancha (40ch del body la dejaba angosta) */
@media (min-width: 700px) {
  .warning { max-width: min(100%, 600px); }
}
.warning .line { margin-bottom: 14px; }
.warning .line:last-child { margin-bottom: 0; }
.warning .line s { opacity: 0.5; }

/* diferencias con The Secret */
.diffs {
  padding-left: 1.2em;
  margin: 0 0 clamp(14px, 2.4vh, 26px);
}

.diffs > li {
  font-weight: 700;
  font-size: clamp(21px, 3.8vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: clamp(14px, 2.4vh, 26px);
  max-width: 38ch;
}

.diffs .line { margin-top: clamp(10px, 1.6vh, 18px); }

/* ---- FAQ en cajas dibujadas a mano, alternando negro / rojo / crema ---- */
.faq .qa,
.faq .qa:last-of-type {
  --r: 14px 10px 16px 8px / 10px 16px 8px 14px;
  --box: var(--ink);
  --fg: var(--paper);
  --shadow: var(--red);
  position: relative;
  margin: 0 0 clamp(18px, 3vh, 28px);
  padding: 0 clamp(18px, 3vw, 28px);
  border: 0;
  border-radius: var(--r);
  background: var(--box);
  color: var(--fg);
}

.faq .qa::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--ink);
  border-radius: var(--r);
  box-shadow: 5px 5px 0 var(--shadow);
  transform: translate(2px, -2px);
  filter: url("#sketch");
  pointer-events: none;
}

.faq .q { font-size: clamp(19px, 2.7vw, 26px); }

.faq .qa:nth-of-type(odd) { rotate: -0.3deg; }
.faq .qa:nth-of-type(even) { rotate: 0.3deg; }
/* abierta se endereza: si no, al crecer la caja la rotación (sobre el centro)
   corre la pregunta varios px hacia un lado */
.faq .qa { transition: opacity 0.7s ease, transform 0.7s ease, rotate 0.2s ease; } /* conserva la del .reveal */
.faq .qa[open] { rotate: 0deg; }

/* 1: negro (default) · 2: rojo · 3: crema */
.faq .qa:nth-of-type(3n + 2) {
  --box: var(--red);
  --shadow: var(--ink);
}

.faq .qa:nth-of-type(3n) {
  --box: var(--paper);
  --fg: var(--ink);
}

/* sobre rojo: subrayado en tinta, Leo y "+" en crema (como en .s-red) */
.faq .qa:nth-of-type(3n + 2) .u { background-image: var(--u-ink); }
.faq .qa:nth-of-type(3n + 2) .leo,
.faq .qa:nth-of-type(3n + 2) .q::after { color: var(--paper); }

/* FAQ (dropdowns): las respuestas largas del docx viven dentro de .qa-body */
.qa-body .copy-img,
.qa-body .comment-img {
  width: min(100%, 440px);
  margin: 14px 0 20px;
}

.qa-body .copy-img.sm {
  width: min(100%, 320px);
}

.qa-body .gap { height: 18px; }
/* ritmo dentro de las respuestas largas: línea grande (bold, cuerpo mayor) y líneas pegadas */
.qa-body .a.big { font-weight: 700; font-size: clamp(20px, 2.6vw, 25px); line-height: 1.25; }
.qa-body .a.tight { margin-bottom: 4px; }

.qa-body .caption { margin: -10px 0 20px; }

.qa-body .diffs > li {
  font-weight: 400;
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  letter-spacing: normal;
  margin-bottom: 12px;
  max-width: 56ch;
}

.qa-body .diffs .a { margin-top: 8px; }

.qa-body .placeholder { margin: 12px 0 16px; }

.qa-body .btn { margin-top: 18px; }
/* CTAs en minúsculas a propósito ("i'm ready") */
.btn--lower { text-transform: none; }

/* huecos que el docx deja marcados entre corchetes */
.placeholder {
  border: 2px dashed currentColor;
  opacity: 0.6;
  padding: 18px 20px;
  font-weight: 600;
  font-size: clamp(15px, 2vw, 19px);
  max-width: 46ch;
  margin: 0 0 clamp(20px, 3.5vh, 32px);
}

/* ---- subrayado a mano ---- */
/* <span class="u">: una línea dibujada a mano (SVG) como fondo, pegada al pie del
   texto; box-decoration-break: clone la repite en cada renglón si la frase se corta.
   Color según banda: rojo sobre crema/blanco, negro sobre rojo, blanco sobre tinta. */
:root {
  --u-red: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M4 6.7C10.8 6.6 31.4 5.9 45.1 6C58.7 6 71.2 6.4 86 6.9C100.8 7.4 120 8.8 133.8 8.8C147.7 8.7 155.3 7.3 169 6.7C182.7 6.2 202 5.4 215.9 5.5C229.8 5.6 239 7.4 252.4 7.5C265.7 7.7 288.7 6.5 296 6.2' fill='none' stroke='%23e4002b' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --u-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M4 6.7C10.8 6.6 31.4 5.9 45.1 6C58.7 6 71.2 6.4 86 6.9C100.8 7.4 120 8.8 133.8 8.8C147.7 8.7 155.3 7.3 169 6.7C182.7 6.2 202 5.4 215.9 5.5C229.8 5.6 239 7.4 252.4 7.5C265.7 7.7 288.7 6.5 296 6.2' fill='none' stroke='%23121212' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --u-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M4 6.7C10.8 6.6 31.4 5.9 45.1 6C58.7 6 71.2 6.4 86 6.9C100.8 7.4 120 8.8 133.8 8.8C147.7 8.7 155.3 7.3 169 6.7C182.7 6.2 202 5.4 215.9 5.5C229.8 5.6 239 7.4 252.4 7.5C265.7 7.7 288.7 6.5 296 6.2' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  --u-blue: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M4 6.7C10.8 6.6 31.4 5.9 45.1 6C58.7 6 71.2 6.4 86 6.9C100.8 7.4 120 8.8 133.8 8.8C147.7 8.7 155.3 7.3 169 6.7C182.7 6.2 202 5.4 215.9 5.5C229.8 5.6 239 7.4 252.4 7.5C265.7 7.7 288.7 6.5 296 6.2' fill='none' stroke='%232b7bff' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
}

.u {
  background-image: var(--u-red);
  background-repeat: no-repeat;
  background-size: 100% 0.32em;
  background-position: 0 100%;
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.s-red .u { background-image: var(--u-ink); }
.bubble--s .u { background-image: var(--u-white); }
.u.blue { background-image: var(--u-blue); } /* ANSWER / SLEEP / ASK sobre tinta */
/* sobre negro (.s-ink) el subrayado también va en rojo */

/* ---- palabras en Leo Hates School (ritmo) ---- */
/* <span class="leo">: palabra manuscrita más grande que el texto que la rodea.
   La fuente solo trae regular: el bold se sintetiza (700) y se refuerza con trazo.
   Roja por defecto; crema sobre las bandas rojas. */
.leo {
  font-family: "Leo Hates School", var(--sans);
  font-size: 1.45em;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: 0;
  white-space: nowrap; /* "texts you" no se parte en dos renglones */
  color: var(--red);
  -webkit-text-stroke: 0.035em currentColor;
}

.leo.lg { font-size: 1.9em; }
/* "Three BIG differences.": enorme pero en la misma línea */
.leo.big { font-size: 3.4em; line-height: 0.7; vertical-align: -0.08em; }

/* Palabra en rojo también sobre fondo negro (.hl pasa a blanco en .s-ink) */
.red { color: var(--red); }

/* "No." gigante a propósito (FAQ del penthouse) */
.leo.xl {
  display: block;
  font-size: 4.2em;
  line-height: 0.85;
  margin: 4px 0 10px;
}

/* en las preguntas de la FAQ: sin agrandar el renglón del summary */
.q .leo { line-height: 0.7; }
/* subtítulo de una pregunta ("In a hurry? Just open this one.") */
.q-sub { display: block; margin-top: 6px; font-weight: 400; font-size: 0.72em; opacity: 0.75; }

/* ---- botones de la landing con el mismo trazo a mano que el NEXT del form ----
   (las variantes --sk-btn-* viven en manifestation.css) */
.btn,
.s-ink .btn {
  border-color: transparent;
  border-radius: 16px;
  color: var(--white);
  background: var(--sk-btn-red-ink) 0 0 / 100% 100% no-repeat, var(--sk-btn-ink) 4px 4px / 100% 100% no-repeat;
}

.btn:hover,
.s-ink .btn:hover {
  color: var(--red);
  background: var(--sk-btn-paper-red) 0 0 / 100% 100% no-repeat, var(--sk-btn-ink) 4px 4px / 100% 100% no-repeat;
}

/* sobre banda roja: crema con trazo de tinta, y rojo al pasar */
.s-red .btn {
  color: var(--red);
  background: var(--sk-btn-paper-ink) 0 0 / 100% 100% no-repeat, var(--sk-btn-ink) 4px 4px / 100% 100% no-repeat;
}

.s-red .btn:hover {
  color: var(--white);
  background: var(--sk-btn-red-ink) 0 0 / 100% 100% no-repeat, var(--sk-btn-ink) 4px 4px / 100% 100% no-repeat;
}

/* sticky "i want mine" sobre la barra de tinta: la copia corrida va en crema */
.sticky-cta__btn {
  border-color: transparent;
  border-radius: 16px;
  text-transform: none; /* va en minúsculas a propósito */
  /* misma altura y cuerpo que los .btn de la página */
  font-size: clamp(16px, 2.3vw, 22px);
  padding: clamp(20px, 2.6vh, 26px) clamp(34px, 5vw, 54px);
  background: var(--sk-btn-red-ink) 0 0 / 100% 100% no-repeat, var(--sk-btn-paper) 4px 4px / 100% 100% no-repeat;
}

.sticky-cta__btn:hover {
  color: var(--red);
  background: var(--sk-btn-paper-red) 0 0 / 100% 100% no-repeat, var(--sk-btn-paper) 4px 4px / 100% 100% no-repeat;
}

/* mismo aire arriba y abajo: la base extiende el fondo 24px hacia arriba con un
   box-shadow, que acá sobra; y el botón dibuja su copia crema 4px más abajo */
.sticky-cta {
  box-shadow: none;
  padding-top: 16px;
  padding-bottom: 18px;
}

/* en celular la nota va en blanco, arriba del botón */
@media (max-width: 620px) {
  body { padding-bottom: 130px; } /* la barra crece a ~126px */
  .sticky-cta {
    flex-direction: column;
    gap: 12px;
  }
  .sticky-cta__note {
    display: inline-flex;
    color: var(--white);
    font-size: 17px;
    text-align: center;
  }
}

.s-red .leo { color: var(--paper); }