/* ============================================================
   WAVESONG, hoja unica del sitio.

   Los tokens son los MISMOS de la app (~/Desktop/Bwave-design/brand/tokens.css),
   recortados a lo que la web usa de verdad. No se inventa ni un hex: si un color
   no esta aqui arriba, no se puede usar mas abajo, y bin/audit.py mide el
   contraste resuelto sobre el DOM real para que eso no sea una promesa.

   La marca es la luz baja de una habitacion a las tres de la manana: neutros
   ciruela, una llama ambar y un amanecer que va de salvia a rosa. Sin rojo de
   alarma en ningun estado, ni siquiera en "time to call". El motivo no es
   estetico y esta escrito en BRAND.md: la lectora esta en el momento de mas
   estres de su vida y un rojo de emergencia convierte una companera en sirena.
   ============================================================ */

:root {
  /* ---- paleta cruda ---- */
  --night-950: #100B18;
  --night-925: #14101B;
  --night-900: #17111F;
  --night-850: #1E1729;
  --night-800: #261E33;
  --night-700: #33263F;
  --night-600: #4A3A57;
  --night-500: #736080;
  --night-400: #9C8CA6;
  --night-300: #BBAEC3;
  --linen-50:  #FFFCFD;
  --linen-100: #FBF6F8;
  --linen-150: #F9F2F5;
  --linen-200: #F5EEF2;
  --linen-300: #EDE3E9;
  --amber-100: #FFF0D4;
  --amber-200: #FFDFA6;
  --amber-300: #FFC96B;
  --amber-400: #F9AE2B;
  --amber-500: #E2930F;
  --amber-700: #8E5A06;
  --coral-50:  #FFF3EF;
  --coral-100: #FFE5DE;
  --coral-200: #FFC6B8;
  --coral-300: #FFA18C;
  --coral-400: #FB7F66;
  --coral-500: #F0644A;
  --coral-600: #D94E33;
  --coral-650: #CE4629;
  --coral-700: #AE3B21;
  --coral-800: #8A2E19;
  --rose-50:  #FFF1F5;
  --rose-100: #FFDEE8;
  --rose-300: #F79BB6;
  --rose-500: #DE5A83;
  --rose-700: #9E3455;
  --sage-50:  #EEF6F1;
  --sage-100: #DBEDE3;
  --sage-300: #86BFA3;
  --sage-500: #47876B;
  --sage-700: #295441;
  --iris-50:  #F4F0FC;
  --iris-100: #EBE5F7;
  --iris-300: #B5A2E0;
  --iris-500: #7B62BC;
  --iris-700: #4E3B80;

  /* ---- semanticos, claro ---- */
  --bg-canvas: var(--linen-100);
  --bg-surface: var(--linen-50);
  --bg-sunken: var(--linen-200);
  --bg-sunken-strong: var(--linen-300);
  --bg-tint-amber: var(--amber-100);
  --bg-tint-sage: var(--sage-50);
  --bg-tint-rose: var(--rose-50);
  --bg-tint-iris: var(--iris-50);
  --bg-tint-coral: var(--coral-50);
  --bg-chrome: rgba(251, 246, 248, 0.92);
  --bg-inverse: var(--night-900);

  --text-primary: var(--night-900);
  --text-secondary: var(--night-600);
  --text-tertiary: var(--night-500);
  --text-on-flame: var(--night-950);
  --text-on-inverse: var(--linen-100);
  --text-accent: var(--coral-700);
  --text-amber: var(--amber-700);
  --text-rose: var(--rose-700);
  --text-success: var(--sage-700);
  --text-iris: var(--iris-700);

  --accent: var(--coral-500);
  --accent-strong: var(--coral-650);
  --flame: var(--amber-400);
  --flame-soft: var(--amber-200);

  --border-hairline: rgba(23, 17, 31, 0.10);
  --border-soft: rgba(23, 17, 31, 0.15);
  --border-strong: rgba(23, 17, 31, 0.24);
  --border-flame: var(--amber-400);

  --phase-early: var(--sage-500);
  --phase-early-soft: var(--sage-100);
  --phase-early-text: var(--sage-700);
  --phase-active: var(--amber-500);
  --phase-active-soft: var(--amber-100);
  --phase-active-text: var(--amber-700);
  --phase-call: var(--rose-500);
  --phase-call-soft: var(--rose-100);
  --phase-call-text: var(--rose-700);

  --grad-hero: linear-gradient(180deg, #FFF4F0 0%, var(--bg-canvas) 78%);
  --grad-wave-line: linear-gradient(90deg, var(--sage-500) 0%, var(--amber-400) 48%, var(--rose-500) 100%);
  --grad-flame: radial-gradient(circle at 50% 34%, var(--amber-300) 0%, var(--amber-400) 48%, var(--amber-500) 100%);
  /* El CTA lleva texto BLANCO encima, y BRAND.md fija que el coral mas claro
     que aguanta blanco a AA es --coral-650 (#CE4629, 4.63:1). El degradado
     bonito de coral-500 a coral-600 da 3.17:1 medido sobre su parada mas
     clara, o sea un fallo de contraste, no una decision de gusto. Se usa el
     que cumple, y bin/audit.py mide el peor punto del degradado para que esto
     no se pueda volver a colar. */
  --grad-cta: linear-gradient(180deg, var(--coral-650) 0%, var(--coral-700) 100%);

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "New York", ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --s-2: 4px;  --s-3: 8px;  --s-4: 12px; --s-5: 16px; --s-6: 20px;
  --s-7: 24px; --s-8: 32px; --s-9: 40px; --s-10: 48px; --s-11: 64px; --s-12: 80px;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-2xl: 32px; --r-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(51, 38, 63, 0.08), 0 1px 2px rgba(51, 38, 63, 0.04);
  --shadow-md: 0 6px 18px rgba(51, 38, 63, 0.10), 0 2px 5px rgba(51, 38, 63, 0.05);
  --shadow-lg: 0 16px 40px rgba(23, 17, 31, 0.14), 0 4px 10px rgba(23, 17, 31, 0.06);
  --shadow-flame: 0 10px 30px rgba(226, 147, 15, 0.30), 0 2px 8px rgba(226, 147, 15, 0.18);

  --tap-min: 44px;
  --wrap: 720px;
  --wrap-wide: 1080px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-base: 260ms;
  --dur-breath: 4800ms;
}

/* ---- semanticos, oscuro. La identidad de la marca, no una cortesia. ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas: var(--night-925);
    --bg-surface: var(--night-850);
    --bg-sunken: #191322;
    --bg-sunken-strong: var(--night-800);
    --bg-tint-amber: rgba(249, 174, 43, 0.14);
    --bg-tint-sage: rgba(92, 162, 131, 0.16);
    --bg-tint-rose: rgba(222, 90, 131, 0.16);
    --bg-tint-iris: rgba(149, 126, 208, 0.16);
    --bg-tint-coral: rgba(240, 100, 74, 0.15);
    --bg-chrome: rgba(20, 16, 27, 0.92);
    --bg-inverse: var(--linen-100);

    --text-primary: #F6EDF3;
    --text-secondary: #C6B7CC;
    --text-tertiary: #A394AC;
    --text-on-inverse: var(--night-900);
    --text-accent: var(--coral-300);
    --text-amber: var(--amber-300);
    --text-rose: var(--rose-300);
    --text-success: var(--sage-300);
    --text-iris: var(--iris-300);

    --border-hairline: rgba(246, 237, 243, 0.10);
    --border-soft: rgba(246, 237, 243, 0.16);
    --border-strong: rgba(246, 237, 243, 0.28);

    --phase-early: var(--sage-300);
    --phase-early-soft: rgba(134, 191, 163, 0.18);
    --phase-early-text: var(--sage-300);
    --phase-active: var(--amber-300);
    --phase-active-soft: rgba(255, 201, 107, 0.18);
    --phase-active-text: var(--amber-300);
    --phase-call: var(--rose-300);
    --phase-call-soft: rgba(247, 155, 182, 0.18);
    --phase-call-text: var(--rose-300);

    --grad-hero: linear-gradient(180deg, #241A33 0%, var(--night-925) 78%);

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.38);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.46);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    --shadow-flame: 0 12px 40px rgba(249, 174, 43, 0.28), 0 2px 10px rgba(249, 174, 43, 0.18);
  }
}

/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: -0.008em;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text-accent); text-underline-offset: 3px; }
a:hover { color: var(--text-primary); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-6); }
.wrap-wide { max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--s-6); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--bg-inverse); color: var(--text-on-inverse);
  padding: var(--s-4) var(--s-6); border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.018em; margin: 0; }
h1 { font-family: var(--font-display); font-size: clamp(30px, 6.2vw, 46px); font-weight: 700; }
h2 { font-size: clamp(23px, 3.6vw, 29px); font-weight: 700; margin: var(--s-11) 0 var(--s-5); }
h3 { font-size: 19px; font-weight: 650; margin: var(--s-8) 0 var(--s-3); letter-spacing: -0.012em; }
p { margin: 0 0 var(--s-5); }
ul, ol { margin: 0 0 var(--s-6); padding-left: 1.3em; }
li { margin-bottom: var(--s-3); }
strong { font-weight: 680; color: var(--text-primary); }
main { display: block; padding-bottom: var(--s-12); }

/* ============================================================ chrome */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-chrome);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border-hairline);
}
/* La barra NO envuelve. En un movil de 390 px envolvia a dos filas y se comia
   300 px, un tercio de la pantalla, empujando el boton de contraccion por
   debajo del pliegue en la unica pagina donde ese boton es el producto. Los
   enlaces que no caben se esconden bajo 560 px con .wide-only y siguen todos
   en el pie, que es donde vive el enlazado interno de verdad. */
.site-header .bar {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 58px; flex-wrap: nowrap;
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  color: var(--text-primary); text-decoration: none; letter-spacing: -0.02em;
  min-height: var(--tap-min);
}
.wordmark .dot {
  width: 13px; height: 13px; border-radius: var(--r-pill);
  background: var(--grad-flame); box-shadow: 0 0 0 4px var(--bg-tint-amber);
  flex: 0 0 auto;
}
.site-nav { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; flex-wrap: nowrap; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap-min);
  padding: 0 var(--s-4); border-radius: var(--r-sm); white-space: nowrap;
  color: var(--text-secondary); text-decoration: none;
  font-size: 15px; font-weight: 550;
}
.site-nav a:hover { color: var(--text-primary); background: var(--bg-sunken); }
.site-nav a[aria-current="page"] { color: var(--text-primary); background: var(--bg-sunken); }
.site-nav a.nav-cta {
  background: var(--grad-cta); color: #FFFFFF; font-weight: 650;
  box-shadow: var(--shadow-sm);
}
.site-nav a.nav-cta:hover { color: #FFFFFF; filter: brightness(1.04); }

/* ============================================================ hero */
.hero { background: var(--grad-hero); padding: var(--s-11) 0 var(--s-9); }
.hero .lede {
  font-size: clamp(18px, 2.6vw, 21px); line-height: 1.55;
  color: var(--text-secondary); margin-top: var(--s-5); max-width: 42ch;
}
.eyebrow {
  font-size: 11px; font-weight: 650; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-amber); margin: 0 0 var(--s-4);
}
.hero h1 { max-width: 20ch; }

/* ============================================================ botones */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-7) 0 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--s-8);
  border: 0; border-radius: var(--r-pill);
  background: var(--grad-cta); color: #FFFFFF;
  font-family: var(--font-ui); font-size: 17px; font-weight: 680;
  letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.btn:hover { color: #FFFFFF; filter: brightness(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-ghost {
  background: transparent; color: var(--text-accent);
  border: 1.5px solid var(--border-strong); box-shadow: none;
}
.btn-ghost:hover { background: var(--bg-sunken); color: var(--text-primary); }
.btn-note { font-size: 14px; color: var(--text-tertiary); margin-top: var(--s-4); }

/* ============================================================ bloques */
.block { margin: var(--s-11) 0; }
.callout {
  background: var(--bg-sunken); border: 1px solid var(--border-hairline);
  border-left: 4px solid var(--flame);
  border-radius: var(--r-md); padding: var(--s-6); margin: var(--s-7) 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout-hush { border-left-color: var(--iris-500); background: var(--bg-tint-iris); }
.callout-sage { border-left-color: var(--phase-early); background: var(--bg-tint-sage); }

/* El aviso medico. Rosa firme, NUNCA rojo: comunica ahora, no peligro. */
.alarm {
  background: var(--bg-tint-rose); border: 1px solid var(--phase-call);
  border-radius: var(--r-md); padding: var(--s-6); margin: var(--s-7) 0;
  color: var(--text-primary);
}
.alarm p:last-child { margin-bottom: 0; }

.factbar {
  list-style: none; padding: 0; margin: var(--s-7) 0;
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.factbar li {
  background: var(--bg-surface); border: 1px solid var(--border-hairline);
  border-radius: var(--r-md); padding: var(--s-5); margin: 0;
}
.factbar .n {
  display: block; font-family: var(--font-rounded);
  font-size: 30px; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.factbar .k { display: block; font-size: 14px; color: var(--text-secondary); margin-top: var(--s-2); }

.grid { display: grid; gap: var(--s-5); margin: var(--s-7) 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.card {
  background: var(--bg-surface); border: 1px solid var(--border-hairline);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.table-scroll { overflow-x: auto; margin: var(--s-7) 0; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 420px; }
caption.source-note {
  caption-side: bottom; text-align: left; font-size: 13.5px;
  color: var(--text-secondary); padding-top: var(--s-4);
}
th, td { padding: var(--s-4); border: 1px solid var(--border-hairline); text-align: left; vertical-align: top; }
th { background: var(--bg-sunken); font-weight: 650; }

.faq { margin: var(--s-7) 0; }
.faq details {
  border: 1px solid var(--border-hairline); border-radius: var(--r-md);
  background: var(--bg-surface); margin-bottom: var(--s-4);
}
.faq summary {
  display: flex; align-items: center; min-height: var(--tap-min);
  padding: var(--s-4) var(--s-6); cursor: pointer;
  font-weight: 620; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--text-tertiary); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 var(--s-6) var(--s-5); color: var(--text-secondary); }
.faq .answer p:last-child { margin-bottom: 0; }

/* La respuesta corta de arriba, la que se pelea el fragmento destacado. */
.quickanswer {
  background: var(--bg-tint-amber); border: 1px solid var(--border-flame);
  border-radius: var(--r-lg); padding: var(--s-7); margin: var(--s-8) 0;
}
.quickanswer h2 { margin: 0 0 var(--s-4); font-size: 21px; }
.quickanswer p:last-child { margin-bottom: 0; }
.quickanswer .lead { font-size: 18px; }

.shot {
  margin: var(--s-8) 0; display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
}
.shot figure { margin: 0; }
.shot img {
  width: 100%; border-radius: var(--r-2xl);
  border: 1px solid var(--border-hairline); box-shadow: var(--shadow-lg);
  background: var(--bg-sunken);
}
.shot figcaption { font-size: 14px; color: var(--text-secondary); margin-top: var(--s-4); }

.updated { font-size: 14px; color: var(--text-tertiary); margin-top: var(--s-9); }
.sources { font-size: 14.5px; color: var(--text-secondary); }
.sources li { margin-bottom: var(--s-4); }

/* ============================================================ captura */
.capture {
  background: var(--bg-surface); border: 1px solid var(--border-hairline);
  border-radius: var(--r-xl); padding: var(--s-8) var(--s-7);
  margin: var(--s-11) 0; box-shadow: var(--shadow-md);
}
.capture h2 { margin-top: 0; }
.capture .field { margin-bottom: var(--s-5); }
.capture label { display: block; font-size: 14px; font-weight: 620; margin-bottom: var(--s-3); color: var(--text-secondary); }
.capture input[type="email"] {
  width: 100%; min-height: var(--tap-min); padding: var(--s-4) var(--s-5);
  border: 1.5px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--bg-canvas); color: var(--text-primary);
  font-family: var(--font-ui); font-size: 17px;
}
.capture input[type="email"]:focus { border-color: var(--accent); }
.consent {
  display: flex; align-items: flex-start; gap: var(--s-4);
  min-height: var(--tap-min); font-size: 14.5px; font-weight: 400;
  color: var(--text-secondary); margin-bottom: var(--s-6); cursor: pointer;
}
.consent input { width: 22px; height: 22px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 15px; margin: var(--s-5) 0 0; min-height: 1.4em; }
.form-msg.ok { color: var(--text-success); }
.form-msg.bad { color: var(--text-rose); }

/* ============================================================ la herramienta */
.tool { margin: var(--s-8) 0 var(--s-11); }
.tool-stage {
  background: var(--bg-surface); border: 1px solid var(--border-hairline);
  border-radius: var(--r-2xl); padding: var(--s-8) var(--s-6) var(--s-7);
  box-shadow: var(--shadow-lg); text-align: center;
}

/* El anillo del patron. Mismo lenguaje que la app: la fase se lee de un
   vistazo por color y por posicion, y la cifra grande va en redonda tabular. */
.ring-wrap { display: flex; justify-content: center; }
.ring { position: relative; width: 208px; height: 208px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ring .track { stroke: var(--bg-sunken-strong); }
.ring .fill { stroke: var(--phase-early); transition: stroke-dashoffset var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out); }
.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.ring-center .lab {
  font-size: 11px; font-weight: 650; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.ring-center .big {
  font-family: var(--font-rounded); font-size: 44px; font-weight: 700;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
  color: var(--text-primary); line-height: 1.04;
}
.ring-center .sub { font-size: 12.5px; color: var(--text-tertiary); }

.phase-pill {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
}
.phase-pill .bead { width: 9px; height: 9px; border-radius: var(--r-pill); background: currentColor; }
.phase-early .phase-pill { background: var(--phase-early-soft); color: var(--phase-early-text); }
.phase-active .phase-pill { background: var(--phase-active-soft); color: var(--phase-active-text); }
.phase-call  .phase-pill { background: var(--phase-call-soft);  color: var(--phase-call-text); }
.phase-early .ring .fill { stroke: var(--phase-early); }
.phase-active .ring .fill { stroke: var(--phase-active); }
.phase-call  .ring .fill { stroke: var(--phase-call); }

/* El titular de la herramienta NO es un h2, es un estado en vivo con
   role="status". Ponerlo como encabezado dejaba una frase que cambia sola
   ("Nothing timed yet", "They are getting closer") por delante del primer h2
   real de la pagina, que es la pregunta que esta pagina viene a responder, y
   ademas metia un h3 entre un h1 y el primer h2. */
.tool-headline {
  font-family: var(--font-display); font-size: clamp(23px, 4.4vw, 30px);
  font-weight: 700; letter-spacing: -0.018em; margin: var(--s-6) 0 var(--s-3);
  line-height: 1.2;
}
.log-title { font-size: 21px; margin: 0 0 var(--s-5); }
.log-count { color: var(--text-tertiary); font-weight: 600; }
.log-count::before { content: "· "; }
.tool-why { color: var(--text-secondary); margin: 0 auto var(--s-6); max-width: 40ch; }

/* Los TRES criterios, siempre los tres, siempre con su medida al lado.
   Este bloque es el producto: la grieta medida en fase 0 es que ninguna
   herramienta del mercado exige el tercero, la hora entera. */
.rule-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin: var(--s-7) 0 var(--s-4); text-align: left;
}
.rule-head .lab {
  font-size: 11px; font-weight: 650; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.rule-switch { display: inline-flex; gap: var(--s-2); background: var(--bg-sunken); border-radius: var(--r-pill); padding: 3px; }
.rule-switch button {
  min-height: var(--tap-min); padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-pill); background: transparent;
  color: var(--text-secondary); font-family: var(--font-ui);
  font-size: 14px; font-weight: 650; cursor: pointer;
}
.rule-switch button[aria-pressed="true"] {
  background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm);
}

.criteria { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); text-align: left; }
.criteria li {
  display: flex; align-items: center; gap: var(--s-4); margin: 0;
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  background: var(--bg-sunken); border: 1.5px solid transparent;
}
.criteria li.met { background: var(--phase-early-soft); border-color: var(--phase-early); }
.criteria .mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--bg-sunken-strong); color: var(--text-secondary);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.criteria li.met .mark { background: var(--phase-early); color: #FFFFFF; }
.criteria .txt { flex: 1 1 auto; font-size: 15.5px; font-weight: 560; }
.criteria .val {
  flex: 0 0 auto; font-family: var(--font-rounded); font-weight: 700;
  font-variant-numeric: tabular-nums; font-size: 16px; color: var(--text-primary);
}
.criteria li.met .val { color: var(--text-success); }

.metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
  margin: var(--s-6) 0 0;
}
.metrics div { background: var(--bg-sunken); border-radius: var(--r-md); padding: var(--s-4) var(--s-3); }
.metrics .n {
  display: block; font-family: var(--font-rounded); font-size: 25px; font-weight: 700;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.metrics .k {
  display: block; font-size: 10.5px; font-weight: 650; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary); margin-top: 2px;
}

/* El boton gigante. Ambar con texto casi negro: 10.26:1, legible con el ojo
   adaptado a la oscuridad y el brillo al minimo, que es la condicion real. */
.bigbtn-wrap { display: flex; justify-content: center; margin: var(--s-8) 0 var(--s-3); }
.bigbtn {
  position: relative; width: 196px; height: 196px; border: 0;
  border-radius: var(--r-pill); background: var(--grad-flame);
  color: var(--text-on-flame); font-family: var(--font-ui);
  font-size: 21px; font-weight: 700; letter-spacing: -0.014em;
  cursor: pointer; box-shadow: var(--shadow-flame);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  transition: transform var(--dur-base) var(--ease-out);
}
.bigbtn .hint { font-size: 13.5px; font-weight: 500; opacity: 0.78; }
.bigbtn:active { transform: scale(0.975); }
.bigbtn::after {
  content: ""; position: absolute; inset: -14px; border-radius: var(--r-pill);
  border: 2px solid var(--flame); opacity: 0.30; pointer-events: none;
  animation: breath var(--dur-breath) var(--ease-breath) infinite;
}
@keyframes breath {
  0%, 100% { transform: scale(1); opacity: 0.30; }
  50% { transform: scale(1.055); opacity: 0.10; }
}
.tool.running .bigbtn { background: var(--grad-cta); color: #FFFFFF; }
.tool.running .bigbtn::after { animation: none; border-color: var(--accent); }

.tool-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.tool-actions button {
  min-height: var(--tap-min); padding: 0 var(--s-6);
  border: 1.5px solid var(--border-soft); border-radius: var(--r-pill);
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-ui); font-size: 15px; font-weight: 620; cursor: pointer;
}
.tool-actions button:hover { background: var(--bg-sunken); color: var(--text-primary); }

.log-wrap { margin-top: var(--s-8); }

.log { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 380px; }
.log th, .log td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border-hairline); text-align: left; white-space: nowrap; }
.log th { background: transparent; border-bottom: 1.5px solid var(--border-soft); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-secondary); }
.log td.num { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; font-weight: 620; }
.log td.act { text-align: right; }
.log button.del {
  min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--s-4);
  border: 0; background: transparent; color: var(--text-secondary);
  font-size: 14px; font-weight: 620; cursor: pointer; border-radius: var(--r-sm);
}
.log button.del:hover { background: var(--bg-sunken); color: var(--text-accent); }
.log-empty { color: var(--text-tertiary); font-size: 15px; }

.wave-strip { height: 4px; border-radius: var(--r-pill); background: var(--grad-wave-line); margin: 0 0 var(--s-8); }
.privacy-note {
  display: flex; gap: var(--s-4); align-items: flex-start;
  font-size: 14.5px; color: var(--text-secondary);
  background: var(--bg-tint-sage); border-radius: var(--r-md);
  padding: var(--s-5); margin: var(--s-7) 0;
}
.privacy-note p { margin: 0; }

/* ============================================================ pie */
.site-footer {
  border-top: 1px solid var(--border-hairline);
  background: var(--bg-sunken); padding: var(--s-11) 0 var(--s-9); margin-top: var(--s-12);
}
.foot-grid { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }
.foot-col h2 {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 var(--s-4);
}
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin: 0; }
.foot-col a {
  display: flex; align-items: center; min-height: var(--tap-min);
  color: var(--text-secondary); text-decoration: none; font-size: 15px;
}
.foot-col a:hover { color: var(--text-primary); text-decoration: underline; }
.foot-legal {
  margin-top: var(--s-9); padding-top: var(--s-7);
  border-top: 1px solid var(--border-hairline);
  font-size: 14px; color: var(--text-secondary);
}
.foot-legal a { margin-right: var(--s-5); display: inline-flex; align-items: center; min-height: var(--tap-min); }
.foot-legal p { margin: 0 0 var(--s-4); }

/* ============================================================ movimiento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 560px) {
  .site-header .bar { min-height: 54px; gap: var(--s-3); }
  .site-nav a { padding: 0 var(--s-3); font-size: 14.5px; }
  .site-nav a.wide-only { display: none; }
  .wordmark { font-size: 19px; gap: var(--s-2); }
  .wordmark .dot { width: 11px; height: 11px; box-shadow: 0 0 0 3px var(--bg-tint-amber); }
  .hero { padding: var(--s-8) 0 var(--s-7); }
  .hero .lede { margin-top: var(--s-4); }
  .tool-stage { padding: var(--s-7) var(--s-5) var(--s-6); }
  .bigbtn { width: 178px; height: 178px; font-size: 20px; }
  .metrics { gap: var(--s-3); }
  .metrics .n { font-size: 22px; }
}