/* =============================================================
   CASU · styles.css · Fase 2 · dirección "Caja verde" (6 sep 2026)
   Página clara y editorial; el producto vive en lienzos de pino
   profundo; la línea de la verdad es lima; la señal es coral; lo
   atribuido es gris. Los colores de las fuentes (VTEX, GA4, Google
   Ads, Meta) convergen en un solo verde: esa es la marca.
   Deriva de CASU_BRIEF_CANONICO_v2.md y CASU_VISUAL_EXPLORATION.md.
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:      #FFFFFF;
  --mist:    #F4F4F8;
  --mist-2:  #E6E6EE;
  --ink:     #1A1A32;
  --ink-2:   #444455;
  --ink-3:   #6B6B80;
  --hair:    rgba(26, 26, 50, 0.12);
  --hair-2:  rgba(26, 26, 50, 0.07);

  --pine:    #1A1A32;
  --pine-2:  #22223F;
  --pine-3:  #2C2C4D;
  --panel:   #23233E;
  --panel-2: #2B2B4A;
  --on-pine: #F2F2F7;
  --on-pine-2: #C5C5CE;
  --on-pine-3: #9393A7;
  --pine-hair: rgba(242, 242, 247, 0.10);
  --pine-hair-2: rgba(242, 242, 247, 0.06);

  --lime:    #7CFF80;
  --lime-2:  #A6FFA8;
  --green:   #16803F;
  --green-wash: rgba(22, 128, 63, 0.10);
  --coral:   #FF5C39;
  --coral-ink: #D63A1B;
  --coral-wash: rgba(255, 92, 57, 0.12);
  --attr:    #9393A7;

  --violet:  #9540FF;
  --violet-2: #7A2BE0;
  --violet-wash: rgba(149, 64, 255, 0.10);
  --sky:     #70B5F8;
  --vtex: #ED125F; --ga: #E37400; --gads: #4285F4; --meta: #0467DF;

  --shadow: 0 1px 2px rgba(26, 26, 50, 0.06), 0 24px 60px -30px rgba(26, 26, 50, 0.35);
  --shadow-canvas: 0 40px 100px -50px rgba(26, 26, 50, 0.55);

  --display: "Funnel Display", "Segoe UI", -apple-system, sans-serif;
  --sans:    "Funnel Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    "Geist Mono", "SFMono-Regular", "Consolas", monospace;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease:        ease;

  --container: 1240px;
  --narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --nav-h: 68px;
  --r-canvas: 20px;
  --r: 12px;
  --r-ctl: 8px;
}

/* =============================================================
   2. Base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scrollbar-color: rgba(26, 26, 50, 0.3) transparent; }
body {
  font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  accent-color: var(--green); caret-color: var(--green);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
ol, ul { padding-left: 1.2em; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; text-wrap: balance; line-height: 1.04; letter-spacing: -0.03em; }
strong { font-weight: 600; }
::selection { background: var(--violet); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.canvas :focus-visible { outline-color: var(--lime); }
[hidden] { display: none !important; }
.num, td, .src, .k, .val, .giant-num, .tk-val, .fc-money strong, .truth-num, .stat-value, .slider-value { font-variant-numeric: tabular-nums slashed-zero; }

/* =============================================================
   3. Utilidades y tipografía
   ============================================================= */
.skip-link { position: fixed; top: -100px; left: 1rem; padding: 0.6rem 1rem; background: var(--pine); color: #FFFFFF; z-index: 9999; border-radius: 8px; font-weight: 500; }
.skip-link:focus-visible { top: 1rem; }

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

.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--mist { background: var(--mist); }
.section--pine { background: var(--pine); color: var(--on-pine); }

.h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 600; max-width: 14ch; }
.h1 .dim { color: var(--ink-3); }
.h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -0.035em; max-width: 20ch; margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }
.h2 .dim { color: var(--ink-3); }
.section--pine .h2 .dim { color: var(--on-pine-3); }
.h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--ink-2); max-width: 56ch; line-height: 1.5; }
.section--pine .lede { color: var(--on-pine-2); }
.prose p { max-width: 62ch; color: var(--ink-2); }
.prose p + p { margin-top: 0.9rem; }
.prose strong { color: var(--ink); }
.prose a { color: var(--green); border-bottom: 1px solid rgba(22, 128, 63, 0.35); }

.k { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); display: block; line-height: 1.3; }
.canvas .k { color: var(--on-pine-3); }
.src { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); line-height: 1.5; }
.canvas .src { color: var(--on-pine-3); }

.tag { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.32em 0.7em; border-radius: 999px; border: 1px solid var(--hair); color: var(--ink-2); background: var(--bg); white-space: nowrap; vertical-align: middle; }
.tag--existe { border-color: rgba(22, 128, 63, 0.45); color: var(--green); background: var(--green-wash); }
.tag--comp { border-color: rgba(214, 58, 27, 0.4); color: var(--coral-ink); background: var(--coral-wash); }
.tag--roadmap { color: var(--ink-3); background: var(--mist); }
.canvas .tag { border-color: var(--pine-hair); color: var(--on-pine-2); background: transparent; }
.canvas .tag--existe { color: var(--lime); border-color: rgba(124, 255, 128, 0.4); }
.canvas .tag--comp { color: var(--coral); border-color: rgba(255, 92, 57, 0.45); }

/* Marcador de señal: coral, un pulso, nunca loop */
.sig { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); vertical-align: middle; flex: none; box-shadow: 0 0 0 0 rgba(255, 92, 57, 0.5); }
.is-played .sig, .sig.is-on { animation: sigPulse 1.1s var(--ease-out) 1 both; }
@keyframes sigPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 92, 57, 0.6); } 100% { box-shadow: 0 0 0 16px rgba(255, 92, 57, 0); } }

/* La marca: logo real (wordmark + mark). Variantes por fondo. */
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand .logo { width: 112px; height: 28.5px; }
.mark { width: 22px; height: 22px; flex: none; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 500; color: var(--green); }
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); }
.section--pine .link-arrow, .canvas .link-arrow { color: var(--lime); }
@media (hover: hover) and (pointer: fine) { .link-arrow:hover svg { transform: translateX(3px); } }

/* =============================================================
   4. Botones
   ============================================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 500; font-size: 0.95rem; line-height: 1.2; padding: 0.85em 1.5em; border-radius: var(--r-ctl); white-space: nowrap; transition: transform 0.16s var(--ease-out), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.btn:active { transform: scale(0.97); }
.btn-lg { padding: 1em 1.8em; font-size: 1.02rem; }
.btn-primary { background: var(--violet); color: #FFFFFF; }
.btn-primary svg { width: 16px; height: 16px; }
.btn-ghost { border: 1px solid var(--hair); color: var(--ink); background: var(--bg); }
.btn-lime { background: var(--lime); color: var(--pine); }
.section--pine .btn-ghost, .canvas .btn-ghost { border-color: var(--pine-hair); color: var(--on-pine); background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--violet-2); box-shadow: 0 12px 28px -14px rgba(149, 64, 255, 0.7); }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-lime:hover { background: var(--lime-2); }
  .section--pine .btn-ghost:hover, .canvas .btn-ghost:hover { border-color: var(--on-pine); }
}
.replay { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.5em 0.9em; border-radius: 999px; border: 1px solid var(--pine-hair); color: var(--on-pine-2); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.replay svg { width: 13px; height: 13px; }
.replay { transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.16s var(--ease-out); }
.replay:active, .nav-toggle:active { transform: scale(0.96); }
.canvas ::selection { background: var(--lime); color: var(--pine); }
@media (hover: hover) and (pointer: fine) { .replay:hover { color: var(--lime); border-color: var(--lime); } }
html:not(.js) .replay { display: none; }

/* =============================================================
   5. Nav
   ============================================================= */
.nav { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.86); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
@supports (backdrop-filter: blur(14px)) { .nav { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); } }
.nav.is-scrolled { border-bottom-color: var(--hair-2); }
.nav-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); height: var(--nav-h); display: flex; align-items: center; gap: 1.5rem; }
.nav-links { display: flex; gap: 1.7rem; margin-left: auto; }
.nav-links a { font-size: 0.94rem; font-weight: 500; color: var(--ink-2); position: relative; padding-block: 0.3em; transition: color 0.2s var(--ease); }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--violet); transform: scaleX(0); transform-origin: right; transition: transform 0.28s var(--ease-out); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav-cta { flex: none; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: var(--r-ctl); border: 1px solid var(--hair); align-items: center; justify-content: center; margin-left: auto; flex: none; }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .ic-close { display: none; }
.nav.is-open .nav-toggle .ic-menu { display: none; }
.nav.is-open .nav-toggle .ic-close { display: block; }
.nav-cta-m { display: none; }

/* =============================================================
   6. Lienzo de producto (.canvas): la UI es la marca
   ============================================================= */
.canvas {
  position: relative; background: var(--pine); color: var(--on-pine); border-radius: var(--r-canvas);
  box-shadow: var(--shadow-canvas); overflow: clip; isolation: isolate;
  background-image: radial-gradient(rgba(242, 242, 247, 0.09) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.canvas-head { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--pine-hair); background: rgba(26, 26, 50, 0.7); font-size: 0.86rem; }
.canvas-head .mark { width: 20px; height: 20px; }
.canvas-title { font-weight: 600; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.canvas-title span { color: var(--on-pine-3); font-weight: 400; }

.canvas-meta { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--on-pine-3); display: flex; align-items: center; gap: 0.9rem; white-space: nowrap; flex: none; }
.canvas-body { position: relative; padding: clamp(1.1rem, 2.6vw, 2rem); }

.val { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; line-height: 0.95; color: var(--on-pine); }
.val.is-truth { color: var(--lime); }

.val.is-sig { color: var(--coral); }

/* Cables SVG (los dibuja el JS entre objetos reales) */

/* Ficha de fuente (logo real + cifra) */

/* Línea de la verdad */

/* Tarjeta de hallazgo en el lienzo */
.fc { background: var(--panel); border: 1px solid var(--pine-hair); border-radius: var(--r); padding: 1rem 1.1rem; display: grid; gap: 0.8rem; font-size: 0.9rem; color: var(--on-pine); position: relative; }
.fc-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--pine-hair); }
.fc-kind { font-weight: 600; font-size: 0.84rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.fc-when { font-family: var(--mono); font-size: 0.66rem; color: var(--on-pine-3); }
.fc-row { display: grid; gap: 0.25rem; }
.fc-row p { line-height: 1.4; }
.fc-hecho p { font-weight: 500; font-size: 0.98rem; }
.fc-money { padding: 0.65rem 0.8rem; background: rgba(26, 26, 50, 0.6); border-radius: 8px; border: 1px solid var(--pine-hair); }
.fc-money strong { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 2.8vw, 2.1rem); letter-spacing: -0.03em; line-height: 1; color: var(--on-pine); }
.fc-hip p { color: var(--on-pine-2); }
.hyp { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); border: 1px solid rgba(255, 92, 57, 0.45); padding: 0.12em 0.45em; border-radius: 4px; margin-right: 0.4em; vertical-align: 0.1em; }
.crumbs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.crumb { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; padding: 0.3em 0.6em; border-radius: 999px; border: 1px solid var(--pine-hair); color: var(--on-pine-2); display: inline-flex; align-items: center; gap: 0.35em; }
.crumb::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-pine-3); }
.crumb.is-done { color: var(--on-pine-3); text-decoration: line-through; }
.crumb.is-done::before { background: var(--lime); }
.crumb.is-now { color: var(--on-pine); border-color: var(--coral); }
.crumb.is-now::before { background: var(--coral); }
.fc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--pine-hair); }
.fc-cov { font-family: var(--mono); font-size: 0.66rem; color: var(--on-pine-3); display: inline-flex; align-items: center; gap: 0.5em; }
.fc-cov b { color: var(--on-pine); font-weight: 500; }
.cov-bar { display: inline-flex; gap: 2px; }
.cov-bar i { width: 10px; height: 5px; border-radius: 2px; background: var(--pine-hair); }
.cov-bar i.on { background: var(--lime); }

/* Tarjeta sobre página clara (documentos) */
.fc--light { background: var(--bg); border-color: var(--hair); color: var(--ink); }
.fc--light .fc-top, .fc--light .fc-foot, .fc--light .fc-ext { border-color: var(--hair-2); }
.fc--light .fc-when, .fc--light .fc-cov, .fc--light .fc-note, .fc--light .fc-hip p, .fc--light .crumb, .fc--light .fc-after .attr { color: var(--ink-3); }
.fc--light .fc-money { background: var(--mist); border-color: var(--hair-2); }
.fc--light .fc-money strong { color: var(--ink); }
.fc--light .fc-cov b { color: var(--ink); }
.fc--light .cov-bar i { background: var(--mist-2); }
.fc--light .cov-bar i.on { background: var(--green); }
.fc--light .crumb { border-color: var(--hair); }
.fc--light .crumb.is-done::before { background: var(--green); }
.fc--light .crumb.is-now { color: var(--ink); border-color: var(--coral-ink); }

.fc--light .hyp { color: var(--coral-ink); border-color: rgba(214, 58, 27, 0.4); }

/* =============================================================
   7. Hero: titular editorial + lienzo "Hoy" a ancho completo
   ============================================================= */
.hero { padding-top: clamp(3rem, 7vh, 5.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-top { display: grid; gap: 1.6rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.hero-side { display: grid; gap: 1.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }

/* Estados de la secuencia 1 (los añade el JS por pasos) */

@keyframes disagree { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }

/* =============================================================
   8. Cifra gigante + tres verdades (blanco editorial)
   ============================================================= */

/* =============================================================
   9. Cinta de datos (scroll horizontal, sin loop)
   ============================================================= */

/* =============================================================
   10. Lienzo "Brecha": perforación diagnóstica
   ============================================================= */

.bar { display: grid; grid-template-columns: 7.5rem 1fr 6rem; align-items: center; gap: 0.7rem; font-size: 0.86rem; }

/* =============================================================
   11. Capítulos de producto (carril + marco que cambia)
   ============================================================= */

/* pantallas de producto */

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.kpi { padding: 0.75rem 0.85rem; background: var(--panel); border: 1px solid var(--pine-hair); border-radius: 10px; display: grid; gap: 0.2rem; }
.kpi .val { font-size: 1.5rem; }
.kpi small { font-family: var(--mono); font-size: 0.62rem; color: var(--on-pine-3); }

.film-grid { display: grid; grid-template-columns: 5.5rem repeat(4, 1fr); gap: 0.4rem; align-items: stretch; }
.film-grid .k { align-self: center; font-size: 0.6rem; }
.cell { background: var(--panel); border: 1px solid var(--pine-hair); border-radius: 8px; padding: 0.55rem 0.5rem; display: grid; gap: 0.1rem; text-align: center; }
.cell b { font-family: var(--display); font-weight: 600; font-size: clamp(0.95rem, 1.8vw, 1.25rem); letter-spacing: -0.02em; font-variant-numeric: tabular-nums slashed-zero; }
.cell small { font-size: 0.64rem; color: var(--on-pine-3); }
.cell.is-sig { border-color: var(--coral); }
.cell.is-sig b { color: var(--coral); }

.bags { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.bag { padding: 0.7rem 0.8rem; background: var(--panel); border: 1px solid var(--pine-hair); border-radius: 10px; display: grid; gap: 0.15rem; }
.bag .val { font-size: 1.3rem; }
.bag small { font-size: 0.7rem; color: var(--on-pine-3); }
.honest { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; border-left: 3px solid var(--coral); padding-left: 0.8rem; }
.canvas .honest { color: var(--on-pine); }


@keyframes caret { 50% { opacity: 0; } }

/* =============================================================
   13. Editorial: qué recibes, para quién, precio, FAQ, cierre
   ============================================================= */

.faq-list { border-top: 1px solid var(--hair); }
.faq-list details { border-bottom: 1px solid var(--hair); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; font-weight: 500; font-size: 1.05rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-plus { position: relative; width: 16px; height: 16px; flex: none; }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; background: var(--ink); border-radius: 1px; transition: transform 0.25s var(--ease-out); }
.faq-plus::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-plus::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-list details[open] .faq-plus::after { transform: rotate(90deg); }
.faq-body { padding: 0 0 1.1rem; color: var(--ink-2); max-width: 62ch; }
.faq-body a { color: var(--green); border-bottom: 1px solid rgba(22, 128, 63, 0.35); }
.closing { display: grid; gap: 1.2rem; }
.closing .h2 { max-width: 18ch; color: var(--on-pine); }
.closing-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.closing .lede { color: var(--on-pine-2); }

/* Reveals */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 0.08s; }
.js .reveal[data-delay="2"] { transition-delay: 0.16s; }
.js .reveal[data-delay="3"] { transition-delay: 0.24s; }

/* =============================================================
   14. Footer (pino)
   ============================================================= */
.footer { background: var(--pine); color: var(--on-pine-2); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem 3rem; }
.footer-claim { color: var(--on-pine-2); font-size: 0.95rem; max-width: 34ch; margin-top: 0.9rem; }
.footer-col h4 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--on-pine-3); margin-bottom: 0.8rem; }
.footer-col a { display: block; font-size: 0.95rem; color: var(--on-pine-2); padding-block: 0.22rem; }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--lime); } }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid var(--pine-hair); font-size: 0.8rem; color: var(--on-pine-3); }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* =============================================================
   15. Páginas secundarias: producto, precios, documentos, diagnóstico, calculadora, legales
   ============================================================= */
.page-hero { padding-top: clamp(3rem, 7vh, 5.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.page-hero .lede { margin-top: 1.2rem; }
.page-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; align-items: center; }
/* producto: módulos alternando lienzo/editorial */
.pm { padding-block: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--hair-2); }
.pm-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; }
.pm-head { display: grid; gap: 0.9rem; }
.pm-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.035em; }
.pm-head .tagline { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }

.pm-limit { border-top: 1px solid var(--hair); padding-top: 0.9rem; margin-top: 0.3rem; font-size: 0.9rem; color: var(--ink-3); }
.pm-limit b { color: var(--ink-2); font-weight: 500; }
.pm-visual { display: grid; gap: 1rem; }
.pm-visual .canvas .canvas-body { display: grid; gap: 0.9rem; }
.connect { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.connect div { border-top: 3px solid var(--pine); padding-top: 0.9rem; }
.connect .k { margin-bottom: 0.4rem; color: var(--green); }
.connect h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.connect p { color: var(--ink-2); font-size: 0.95rem; }
.notdo { list-style: none; padding: 0; display: grid; gap: 0.6rem; max-width: 62ch; }
.notdo li { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.4rem; color: var(--ink-2); }
.notdo li::before { content: ""; width: 10px; height: 3px; background: var(--coral); margin-top: 0.7em; border-radius: 2px; }
.notdo b { color: var(--ink); font-weight: 600; }
/* tablas claras (demo, documentos) */

.demo-banner { display: inline-flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2); border: 1px solid var(--hair); border-radius: 999px; padding: 0.5rem 1rem; background: var(--mist); max-width: 100%; }
.story { display: grid; gap: 0; }
.beat-sec { display: grid; grid-template-columns: 1fr; gap: 1.2rem 3rem; padding: clamp(1.8rem, 4vw, 3rem) 0; border-top: 1px solid var(--hair-2); align-items: start; }
.beat-sec:first-child { border-top: 0; }
.beat-sec .bt { display: grid; gap: 0.5rem; align-content: start; }
.beat-sec .bt .k { color: var(--green); }
.beat-sec .bt h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.beat-sec .bt p { color: var(--ink-2); font-size: 0.97rem; max-width: 42ch; }
.beat-sec .honest { color: var(--ink); margin-top: 0.4rem; }

/* precios */

.plans { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.plan { border: 1px solid var(--hair); border-radius: var(--r-canvas); background: var(--bg); padding: clamp(1.3rem, 2.6vw, 1.8rem); display: grid; gap: 1rem; align-content: start; }
.plan.is-featured { background: var(--pine); color: var(--on-pine); border-color: var(--pine); }
.plan-name { font-size: 1.6rem; letter-spacing: -0.03em; }
.plan-cad { color: var(--ink-2); font-size: 0.95rem; }
.plan.is-featured .plan-cad { color: var(--on-pine-2); }
.plan-price { display: grid; gap: 0.2rem; padding: 0.8rem 0; border-top: 1px solid var(--hair-2); border-bottom: 1px solid var(--hair-2); }
.plan.is-featured .plan-price { border-color: var(--pine-hair); }
.plan-price b { font-family: var(--display); font-weight: 600; font-size: 1.6rem; letter-spacing: -0.03em; line-height: 1; }

.plan-price small { font-size: 0.78rem; color: var(--ink-3); }
.plan.is-featured .plan-price small { color: var(--on-pine-3); }
.plan-feats { list-style: none; padding: 0; display: grid; gap: 0.45rem; }
.plan-feats li { position: relative; padding-left: 1.4rem; font-size: 0.93rem; color: var(--ink-2); }
.plan-feats li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 3px; background: var(--green); border-radius: 2px; }
.plan-feats li b { color: var(--ink); font-weight: 500; }
.plan.is-featured .plan-feats li { color: var(--on-pine-2); }
.plan.is-featured .plan-feats li b { color: var(--on-pine); }
.plan.is-featured .plan-feats li::before { background: var(--lime); }
.plan .btn { width: 100%; }
.plan.is-featured .btn-primary { background: var(--lime); color: var(--pine); }

.guarantee { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.guarantee div { border-top: 3px solid var(--pine); padding-top: 0.9rem; }
.guarantee h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.guarantee p { color: var(--ink-2); font-size: 0.95rem; }

/* documentos */
.doc { max-width: var(--narrow); }
.doc-hero { padding-top: clamp(3rem, 7vh, 5.5rem); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.doc-hero .h1 { max-width: 14ch; }
.doc-hero .lede { margin-top: 1.2rem; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); margin-top: 1.4rem; }
.toc { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.toc a { display: grid; gap: 0.25rem; border-top: 3px solid var(--pine); padding: 0.9rem 0 0; }
.toc h3 { font-size: 1.05rem; }
.toc p { color: var(--ink-3); font-size: 0.88rem; }
.doc .part { margin-top: clamp(3rem, 7vw, 5rem); padding-top: 1.2rem; border-top: 3px solid var(--pine); }
.doc .part h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.doc .part .k { margin-bottom: 0.6rem; }
.doc section { margin-top: clamp(2.2rem, 5vw, 3.2rem); }
.doc h3 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); margin-bottom: 0.8rem; }
.doc h4 { font-size: 1.08rem; margin: 1.3rem 0 0.5rem; }
.doc p, .doc li { color: var(--ink-2); }
.doc p + p { margin-top: 0.85rem; }
.doc p + ul, .doc p + ol { margin-top: 0.7rem; }
.doc ul, .doc ol { display: grid; gap: 0.5rem; margin-bottom: 0.9rem; }
.doc strong { color: var(--ink); }
.doc .rule { border-left: 3px solid var(--green); padding: 0.2rem 0 0.2rem 1.1rem; margin: 1.2rem 0; }
.doc .rule p { color: var(--ink); font-weight: 500; }
.doc .place-k { color: var(--green); margin: 1.6rem 0 0.3rem; }
.doc .preg { border-left: 3px solid var(--mist-2); padding-left: 0.9rem; color: var(--ink); margin-bottom: 0.7rem; }
.doc .verbs { display: grid; gap: 0.6rem; margin: 0.9rem 0; }
.doc .verbs p { border-top: 1px solid var(--hair-2); padding-top: 0.6rem; }
.doc .verbs b { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); margin-right: 0.5rem; }
.doc .scrollx { overflow-x: auto; margin: 1rem 0; border: 1px solid var(--hair); border-radius: var(--r); background: var(--bg); }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 520px; }
.doc th { text-align: left; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--hair); background: var(--mist); }
.doc td { padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--hair-2); color: var(--ink-2); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc .rules { list-style: none; padding: 0; counter-reset: r; }
.doc .rules li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.6rem; border-top: 1px solid var(--hair-2); padding: 0.7rem 0; }
.doc .rules li::before { counter-increment: r; content: counter(r); font-family: var(--mono); font-size: 0.78rem; color: var(--green); padding-top: 0.2em; }
.doc .fase { display: grid; gap: 0.7rem; }
.doc .fase div { display: grid; grid-template-columns: 8rem 1fr; gap: 0.8rem; border-top: 1px solid var(--hair-2); padding-top: 0.7rem; }
.doc .fase .f { font-family: var(--mono); font-size: 0.72rem; color: var(--green); padding-top: 0.25em; }
.doc dl { display: grid; gap: 0.7rem; }
.doc dl div { border-top: 1px solid var(--hair-2); padding-top: 0.7rem; }
.doc dt { font-weight: 600; color: var(--ink); }
.doc dd { color: var(--ink-2); }
.doc .cta-band { margin-top: clamp(2.5rem, 6vw, 4rem); border-radius: var(--r-canvas); background: var(--pine); color: var(--on-pine); padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.doc .cta-band p { color: var(--on-pine); font-weight: 500; font-size: 1.1rem; }
.doc .nota-doc { margin-top: 1.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); line-height: 1.7; }
.doc .fc { margin: 1.2rem 0; font-size: 0.92rem; }
.sec-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.sec-item { border-top: 3px solid var(--pine); padding-top: 0.9rem; display: grid; gap: 0.4rem; align-content: start; }
.sec-item h3 { font-size: 1.1rem; }
.sec-item p { color: var(--ink-2); font-size: 0.95rem; }
.sec-item .tag { justify-self: start; }
/* diagnóstico y legales */
.page-body { padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.page-section { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.page-section .h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.diag-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.2rem); }
.diag-item { border-top: 3px solid var(--pine); padding-top: 1rem; }
.diag-item h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin-bottom: 0.4rem; }
.diag-item p { color: var(--ink-2); font-size: 0.95rem; max-width: 40ch; }
.calls { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.call { border-radius: var(--r); background: var(--mist); padding: 1.2rem 1.3rem; display: grid; gap: 0.4rem; }
.call .k { color: var(--green); }
.call h3 { font-size: 1.15rem; }
.call p { color: var(--ink-2); font-size: 0.95rem; }
.entrega { margin-top: clamp(1.4rem, 3vw, 2rem); font-size: 1.02rem; color: var(--ink-2); max-width: 62ch; }
.entrega strong { color: var(--ink); }
.diag-form { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-canvas); box-shadow: var(--shadow); padding: clamp(1.6rem, 3.5vw, 2.4rem); }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.field label { display: block; font-size: 0.88rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.45rem; }
.field input, .field select { width: 100%; font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--bg); border: 1px solid rgba(26, 26, 50, 0.35); border-radius: var(--r-ctl); padding: 0.7em 0.9em; transition: border-color 0.2s var(--ease); font-variant-numeric: tabular-nums; }
.field input:focus, .field select:focus { border-color: var(--green); outline: 2px solid var(--green); outline-offset: 0; }
.field input::placeholder { color: var(--ink-3); }
.field-full { grid-column: 1 / -1; }
.field-hint { font-size: 0.78rem; color: var(--ink-3); margin-top: 0.35rem; }
.form-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.form-note { font-size: 0.8rem; color: var(--ink-3); line-height: 1.5; }
.form-note a { color: var(--green); }
.botcheck { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.diag-alt { margin-top: 1.2rem; }
.legal-inner { max-width: 720px; }
.legal-updated { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0.8rem 0 clamp(2rem, 4vw, 3rem); }
.legal h2 { font-size: 1.1rem; font-weight: 600; border-top: 1px solid var(--hair); padding-top: 1.2rem; margin: 1.8rem 0 0.6rem; }
.legal h2 span { font-family: var(--mono); font-weight: 400; font-size: 0.7rem; color: var(--green); letter-spacing: 0.1em; margin-right: 0.7rem; }
.legal p, .legal ul { color: var(--ink-2); font-size: 0.95rem; max-width: 62ch; margin-bottom: 0.7rem; }
.legal a { color: var(--green); border-bottom: 1px solid rgba(22, 128, 63, 0.35); }
/* calculadora (portado) */
.calc-hero { padding-top: clamp(3rem, 7vh, 5.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.calc-title { font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 600; margin-bottom: 1rem; max-width: 18ch; }
.calc-title em { font-style: normal; color: var(--green); }
.calc-sub { font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--ink-2); max-width: 52ch; }
.calc { padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.calc-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.calc-panel { background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-canvas); padding: clamp(1.6rem, 3.5vw, 2.4rem); }
.calc-results { background: var(--pine); color: var(--on-pine); border-radius: var(--r-canvas); padding: clamp(1.6rem, 3.5vw, 2.4rem); }
.calc-folio { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.calc-results .calc-folio { color: var(--on-pine-3); }
.cur-toggle { display: inline-flex; border: 1px solid var(--hair); border-radius: var(--r-ctl); overflow: clip; margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.cur-btn { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; padding: 0.5em 1.3em; color: var(--ink-3); transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.08s var(--ease-out); }
.cur-btn + .cur-btn { border-left: 1px solid var(--hair); }
.cur-btn.is-active { background: var(--pine); color: var(--on-pine); }
.cur-btn:active { transform: scale(0.96); }
.slider-block { margin-bottom: clamp(1.6rem, 3vw, 2.1rem); }
.slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.slider-label { font-size: 0.92rem; font-weight: 500; color: var(--ink-2); }
.slider-value { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; white-space: nowrap; }
input[type="range"].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; outline-offset: 4px; cursor: pointer; }
input[type="range"].slider::-webkit-slider-runnable-track { height: 6px; border-radius: 100px; background: linear-gradient(to right, var(--green) var(--fill, 50%), var(--mist-2) var(--fill, 50%)); }
.canvas input[type="range"].slider::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--lime) var(--fill, 0%), rgba(242, 242, 247, 0.15) var(--fill, 0%)); }
input[type="range"].slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--pine); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--hair), 0 4px 10px rgba(26, 26, 50, 0.3); }
.canvas input[type="range"].slider::-webkit-slider-thumb { background: var(--lime); border-color: var(--pine); }
input[type="range"].slider::-moz-range-track { height: 6px; border-radius: 100px; background: linear-gradient(to right, var(--green) var(--fill, 50%), var(--mist-2) var(--fill, 50%)); }
input[type="range"].slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--pine); border: 3px solid var(--bg); }
.roas-block { border-top: 1px solid var(--hair-2); padding-top: 1.5rem; }
.roas-label { display: block; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); margin-bottom: 0.6rem; }
.roas-hint { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-left: 0.6rem; }
.roas-input { width: 130px; font-family: var(--display); font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--bg); border: 1px solid rgba(26, 26, 50, 0.35); border-radius: var(--r-ctl); padding: 0.55em 0.9em; }
.roas-input:focus { border-color: var(--green); outline: none; }
.verdict-card { border: 1px solid var(--pine-hair); border-radius: var(--r); padding: clamp(1.3rem, 2.5vw, 1.8rem); margin-bottom: 1.4rem; background: var(--panel); }
.verdict-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.verdict-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--coral); }
.verdict-title { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; }
.verdict-text { color: var(--on-pine-2); font-size: 0.97rem; font-variant-numeric: tabular-nums; }
.verdict-card.v-ok .verdict-dot { background: var(--lime); }
.verdict-card.v-bad .verdict-dot { background: var(--coral); }
@keyframes vSwap { from { opacity: 0.35; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.verdict-card.v-anim { animation: vSwap 0.4s var(--ease-out); }
.roas-warn { font-size: 0.85rem; color: var(--on-pine-2); border-top: 1px solid var(--pine-hair); padding-top: 0.8rem; margin-top: 0.9rem; }
.roas-warn strong { color: var(--on-pine); font-weight: 600; }
.stat-cards { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-bottom: 1.6rem; }
.stat-card { border: 1px solid var(--pine-hair); border-radius: 10px; padding: 0.9rem 1rem; background: var(--panel); }
.stat-label { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-pine-3); display: block; margin-bottom: 0.4rem; }
.stat-value { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -0.03em; line-height: 1; display: block; margin-bottom: 0.3rem; color: var(--lime); }
.stat-sub { font-size: 0.78rem; color: var(--on-pine-3); font-variant-numeric: tabular-nums; }
.calc-cta { border-top: 1px solid var(--pine-hair); padding-top: 1.4rem; margin-bottom: 1.2rem; }
.calc-cta p { color: var(--on-pine-2); font-size: 0.95rem; margin-bottom: 0.9rem; }
.calc-cta .btn-primary { background: var(--lime); color: var(--pine); }
.calc-ref { font-family: var(--mono); font-size: 0.7rem; color: var(--on-pine-3); line-height: 1.6; }

/* =============================================================
   16. Responsive
   ============================================================= */
@media (min-width: 540px) {
  
  .connect { grid-template-columns: repeat(3, 1fr); }
  .calls { grid-template-columns: 1fr 1fr; }
  .guarantee { grid-template-columns: 1fr 1fr; }
  
  .sec-grid { grid-template-columns: 1fr 1fr; }
  .toc { grid-template-columns: repeat(3, 1fr); }
  .bags { grid-template-columns: repeat(4, 1fr); }
  
  
  
  
  .stat-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 720px) {
  .diag-grid { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  
  .beat-sec { grid-template-columns: minmax(16rem, 0.8fr) 1.2fr; }
  
  
  
  
  
}

@media (min-width: 960px) {
  
  
  
  .pm-grid { grid-template-columns: 0.8fr 1.2fr; }
  .pm:nth-of-type(even) .pm-grid { grid-template-columns: 1.2fr 0.8fr; }
  .pm:nth-of-type(even) .pm-head { order: 2; }
  .plans { grid-template-columns: repeat(3, 1fr); }
  .calc-grid { grid-template-columns: 0.9fr 1.1fr; }
  .hero-top { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 2rem 3rem; }
  .hero-top .hero-side { display: grid; gap: 1.2rem; }
}

@media (max-width: 719px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .nav.is-open .nav-links { display: grid; position: absolute; left: 0; right: 0; top: var(--nav-h); background: var(--bg); border-bottom: 1px solid var(--hair); padding: 0.6rem var(--gutter) 1rem; gap: 0.2rem; }
  .nav.is-open .nav-links a { font-size: 1.1rem; padding: 0.6em 0; border-bottom: 1px solid var(--hair-2); }
  .nav.is-open .nav-links a::after { display: none; }
  .nav.is-open .nav-links .nav-cta-m { display: inline-flex; margin-top: 0.6rem; border-bottom: 0; }
  html:not(.js) .nav-links { display: flex; flex-wrap: wrap; gap: 0.8rem; }
  html:not(.js) .nav-toggle { display: none; }
  .canvas-tabs, .canvas-meta { display: none; }
  
  
  
  
  
  
  .bar { grid-template-columns: 5.5rem 1fr 4.5rem; font-size: 0.8rem; }
  
  
  .film-grid { grid-template-columns: repeat(4, 1fr); }
  .film-grid .k { grid-column: 1 / -1; }
  .gauges, .kpis { grid-template-columns: 1fr 1fr; }
  
  
  
  
  
  
}
@media (min-width: 720px) { .nav-cta-m { display: none !important; } }

/* =============================================================
   17. Reduced motion: estado final, sin desplazamiento
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 0.3s ease; }
  
  
  
  
  
  
  
  
  
  
  .is-played .sig, .sig.is-on { animation: none; }
  .btn, .link-arrow svg, .chap-frame .screen { transition: none; }
  
}

/* =============================================================
   20. Identidad real y narrativa de producto (6 sep 2026 · v4)
   ============================================================= */
.footer .brand .logo { width: 120px; height: 30.5px; }
.nav-links a[aria-current="page"]::after { background: var(--violet); }
.canvas { background-image: radial-gradient(rgba(242, 242, 247, 0.07) 1px, transparent 1.2px); }

/* Ecosistema: fichas de fuente compactas (logos reales + capas propias) */

.src-mini { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.65rem 0.35rem 0.4rem; border-radius: 999px; border: 1px solid var(--pine-hair); background: var(--panel); font-size: 0.78rem; font-weight: 500; color: var(--on-pine); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease-out); }
.src-mini i { width: 22px; height: 22px; border-radius: 6px; background: rgba(242, 242, 247, 0.08); display: grid; place-items: center; }
.src-mini svg { width: 13px; height: 13px; }
.src-mini.is-casu i { background: var(--violet-wash); }
.src-mini.is-casu svg { color: var(--lime); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.src-mini small { color: var(--on-pine-3); font-weight: 400; }

/* Centro de mando (hero) */

/* estados de la secuencia (el JS sube data-step 0..4) */

/* orden final: la prioridad primero (reordenamiento por CSS order) */

/* Lo que CASU encontró esta mañana (cadena de la historia) */

/* Inteligencia de producto y promoción (lienzo grande) */

/* Capítulo (medios): cabecera de módulo numerado por su lugar en el sistema */

/* =============================================================
   21. Home v5: una sola historia · cruce · territorios · salidas
   ============================================================= */
/* Cadena de la mañana (hero) */


/* Territorios (04) */

/* Salidas (05) */

@media (min-width: 720px) {
  
  
  
  
}

@media (prefers-reduced-motion: reduce) {
  .js .canvas--story:not(.is-played) .chain-step, .js .canvas--story:not(.is-played) .chain-final,
}

/* =============================================================
   22. Fase 2.1 · descarte / foco / pruning: el movimiento es el razonamiento
   (hero y demo 1) · cruce sin cables · precio y promoción · pauta × producto ·
   tres ideas · planes con precio
   ============================================================= */
/* Motor: [data-seq] recibe p1..pN. Sin la clase .js (sin JavaScript) todo
   está en su estado final. .no-tr congela transiciones al rebobinar. */
.no-tr, .no-tr * { transition: none !important; }

/* Conclusión de cada lienzo (una por visual) */
.concl { position: relative; display: grid; grid-template-columns: 1fr; gap: 0.5rem 1.4rem; align-items: center; padding: 1rem 1.2rem; border-radius: var(--r); background: var(--pine); border: 1.5px solid var(--lime); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease-out); }
.concl .k { color: var(--lime); margin-bottom: 0.25rem; }
.concl-txt { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -0.025em; line-height: 1.15; color: var(--on-pine); }
.concl .src { max-width: 26ch; }

/* ── Hero: una cifra se abre, lo que no explica pierde contraste, el lienzo
   se vuelve ranking, aparecen columnas, 12 filas se reducen a 4 ── */
.canvas--prune .canvas-body { display: grid; gap: 1rem; }
.pr-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.pr-node { position: relative; background: var(--panel); border: 1px solid var(--pine-hair); border-radius: var(--r); padding: 0.8rem 0.95rem; display: grid; gap: 0.2rem; align-content: start; transition: opacity 0.55s var(--ease), transform 0.6s var(--ease-out), border-color 0.4s var(--ease); }
.pr-node .val { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.pr-node small { font-family: var(--mono); font-size: 0.64rem; color: var(--on-pine-3); line-height: 1.4; }
.pr-venta { grid-column: 1 / -1; border-color: var(--on-pine-3); }
.pr-venta .val { font-size: clamp(2.3rem, 4.6vw, 3.4rem); }
.pr-conv { border-color: var(--coral); }
.pr-ticket, .pr-trafico { opacity: 0.35; }
.pr-node .why { font-size: 0.78rem; color: var(--on-pine-2); margin-top: 0.15rem; }
.pr-conv .why { color: var(--on-pine); }

.pr-rank { display: grid; gap: 0.3rem; transition: opacity 0.6s var(--ease), transform 0.7s var(--ease-out); }
.pr-rank-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; margin-bottom: 0.3rem; }
.pr-rank-h .k { color: var(--on-pine); }
.pr-row { display: grid; grid-template-columns: 1fr 0.85fr 1.35fr 0.95fr 0.85fr 0.6fr 0.7fr; gap: 0.5rem; align-items: center; padding: 0.42rem 0.75rem; border: 1px solid var(--pine-hair); border-radius: 8px; background: var(--panel); font-size: 0.82rem; color: var(--on-pine-2); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease-out), border-color 0.45s var(--ease), background-color 0.45s var(--ease); }
.pr-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-row .c-clase { white-space: normal; line-height: 1.2; overflow: visible; }
.pr-leg { font-family: var(--mono); font-size: 0.7rem; color: var(--on-pine-3); padding: 0.2rem 0.75rem 0; line-height: 1.5; }
.pr-row.is-h { background: transparent; border-color: transparent; padding-block: 0.15rem; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-pine-3); }
.pr-row .c-sku { font-weight: 600; color: var(--on-pine); display: flex; align-items: center; gap: 0.5rem; }
.pr-row .c-sku em { font-style: normal; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime); border: 1px solid rgba(124, 255, 128, 0.45); border-radius: 4px; padding: 0.1em 0.4em; opacity: 0; transition: opacity 0.4s var(--ease); }
.pr-row.is-cand .c-sku em { opacity: 1; }
.pr-row .c-gap { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; color: var(--coral); font-size: 0.95rem; }
.pr-row .c-num { text-align: right; font-family: var(--mono); font-size: 0.74rem; }
.pr-row .is-off { color: var(--on-pine-3); }
.pr-row .is-on { color: var(--lime); }
.pr-ctx { transition: opacity 0.45s var(--ease); transition-delay: calc(var(--c, 0) * 0.28s); }
.pr-row.is-cand { border-color: var(--lime); background: var(--panel-2); color: var(--on-pine); }
.pr-row:not(.is-cand):not(.is-h) { opacity: 0.35; transform: scale(0.985); }
.pr-tot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; padding: 0.4rem 0.75rem 0; font-family: var(--mono); font-size: 0.64rem; color: var(--on-pine-3); }
.pr-tot b { color: var(--on-pine-2); font-weight: 500; }

/* pasos (solo con JS): antes del paso, oculto o sin podar */
.js .canvas--prune:not(.p3) .pr-ticket, .js .canvas--prune:not(.p5) .pr-trafico { opacity: 1; }
.js .canvas--prune:not(.p1) .pr-venta,
.js .canvas--prune:not(.p2) .pr-ordenes, .js .canvas--prune:not(.p2) .pr-ticket,
.js .canvas--prune:not(.p4) .pr-trafico, .js .canvas--prune:not(.p4) .pr-conv { opacity: 0; transform: translateY(10px); }
.js .canvas--prune:not(.p6) .pr-rank { opacity: 0; transform: translateY(14px); }
.js .canvas--prune:not(.p7) .pr-rank .pr-ctx { opacity: 0; }
.js .canvas--prune:not(.p8) .pr-rank .pr-row:not(.is-h) { opacity: 1; transform: none; border-color: var(--pine-hair); background: var(--panel); color: var(--on-pine-2); }
.js .canvas--prune:not(.p8) .pr-rank .pr-row .c-sku em { opacity: 0; }
.js .canvas--prune:not(.p9) .concl { opacity: 0; transform: translateY(10px); }
.canvas--prune .pr-row { transition-delay: calc(var(--i, 0) * 0.04s); }

.h1--tres { font-size: clamp(2.1rem, 4.2vw, 3.2rem); max-width: 24ch; }
.h1--tres .ln { display: block; }

/* ── Cruce: las fuentes llegan a CASU y CASU llega a las respuestas.
   Conectores cortos, dibujados solo cuando ocurre la relación (JS calcula
   los trazos entre objetos reales; sin JS no hay trazos y la lectura sigue
   completa). Orden: fuentes → conectores → pulso del nodo → conectores →
   respuestas → todo asienta al 35 %. ── */
.cross { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: center; position: relative; }
.cross-srcs, .cross-hub, .cross-out { position: relative; z-index: 2; }
.cross-srcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem; }
.cross-srcs .src-mini { justify-content: flex-start; border-radius: 10px; padding: 0.55rem 0.7rem; transition-delay: calc(var(--i, 0) * 0.12s); }
.cross-hub { display: grid; place-items: center; gap: 0.5rem; padding: 1.2rem; background: var(--panel); border: 1px solid var(--lime); border-radius: var(--r-canvas); justify-self: center; min-width: 11rem; transition: border-color 0.3s var(--ease); }
.cross-hub .k { color: var(--lime); transition: color 0.3s var(--ease); }
.hub-mark { width: 64px; height: 64px; transition: opacity 0.3s var(--ease); }
.cross-out { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.cross-out li { display: grid; gap: 0.1rem; padding: 0.75rem 0.9rem; background: var(--panel); border: 1px solid var(--pine-hair); border-radius: 10px; transition: opacity 0.4s var(--ease), transform 0.45s var(--ease-out); transition-delay: calc(0.14s + var(--i, 0) * 0.08s); }
.cross-out b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; color: var(--on-pine); }
.cross-out span { font-size: 0.82rem; color: var(--on-pine-2); }
.cross .wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.cross .wires path { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: 0; opacity: 0.35; transition: stroke-dashoffset 0.14s linear, opacity 0.4s var(--ease); transition-delay: calc(var(--i, 0) * 0.08s), calc(var(--i, 0) * 0.08s); }
@keyframes hub-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* pasos (solo con JS) */
.js .canvas--cross:not(.p1) .src-mini { opacity: 0; transform: translateX(-10px); }
.js .canvas--cross:not(.p5) .wires path { transition-duration: 0.14s, 0s; }
.js .canvas--cross:not(.p2) .wires .w-src { stroke-dashoffset: var(--len); opacity: 0; }
.js .canvas--cross.p2:not(.p5) .wires .w-src { opacity: 0.9; }
.js .canvas--cross:not(.p3) .cross-hub { border-color: var(--pine-hair); }
.js .canvas--cross:not(.p3) .cross-hub .k { color: var(--on-pine-2); }
.js .canvas--cross:not(.p3) .hub-mark { opacity: 0.55; }
.js .canvas--cross.p3 .cross-hub { animation: hub-pulse 0.3s var(--ease-in-out) 1; }
.js .canvas--cross:not(.p4) .wires .w-out { stroke-dashoffset: var(--len); opacity: 0; }
.js .canvas--cross.p4:not(.p5) .wires .w-out { opacity: 0.9; }
.js .canvas--cross:not(.p4) .cross-out li { opacity: 0; transform: translateX(10px); }
/* móvil: sin cables; dos marcas verticales cortas hacen de bisagra */
.cross-hub::before, .cross-hub::after { content: ""; position: absolute; left: 50%; width: 2px; height: 10px; margin-left: -1px; background: var(--lime); border-radius: 1px; opacity: 0.6; transition: opacity 0.2s var(--ease); }
.cross-hub::before { top: -15px; }
.cross-hub::after { bottom: -15px; }
.js .canvas--cross:not(.p2) .cross-hub::before, .js .canvas--cross:not(.p4) .cross-hub::after { opacity: 0; }

/* ── Precio y promoción: tres años que se separan ── */
.canvas--bridge .canvas-body { display: grid; gap: 1.1rem; }
.yrs3 { display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 0.35rem 0.9rem; align-items: baseline; transition: opacity 0.55s var(--ease), transform 0.6s var(--ease-out); }
.yrs3 .yh { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-pine-3); text-align: right; }
.yrs3 .yh.is-sig { color: var(--coral); }
.yrs3 .yl { color: var(--on-pine-2); font-size: 0.8rem; }
.yrs3 .yv { font-family: var(--display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--on-pine); text-align: right; }
.yrs3 .yv.is-big { font-size: clamp(1.25rem, 2.3vw, 1.75rem); }
.yrs3 .yv.is-sig { color: var(--coral); }
.yrs3 .yv.is-dim { color: var(--on-pine-3); font-weight: 500; }
.bridge { display: grid; gap: 0.55rem; transition: opacity 0.55s var(--ease); }
.bridge-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; }
.bridge-h b { font-family: var(--display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--coral); }
.bbar { display: grid; grid-template-columns: 9rem 1fr auto; gap: 0.7rem; align-items: center; font-size: 0.84rem; }
.bbar-lbl { color: var(--on-pine); line-height: 1.25; }
.bbar-lbl small { display: block; font-family: var(--mono); font-size: 0.6rem; color: var(--on-pine-3); margin-top: 0.15rem; white-space: nowrap; }
.bbar-track { height: 10px; background: var(--pine-hair); border-radius: 5px; overflow: hidden; }
.bbar-fill { height: 100%; width: var(--w); background: var(--coral); border-radius: 5px; transform-origin: left center; transition: transform 0.8s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.3s); }
.bbar.is-pos .bbar-fill { background: var(--lime); }
.bbar-val { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; color: var(--coral); white-space: nowrap; }
.bbar.is-pos .bbar-val { color: var(--lime); }
.mix { display: grid; gap: 0.4rem; transition: opacity 0.55s var(--ease); }
.mix-row { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.6rem; align-items: center; }
.mix-row .k { color: var(--on-pine-2); }
.mix-bar { display: flex; height: 20px; border-radius: 5px; overflow: hidden; gap: 2px; }
.mix-bar i { display: block; height: 100%; width: var(--w); font-style: normal; font-family: var(--mono); font-size: 0.6rem; line-height: 20px; text-align: center; color: var(--pine); transform-origin: left center; transition: transform 0.7s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.12s); }
.mix-bar i.m1 { background: var(--coral); } .mix-bar i.m2 { background: var(--on-pine-3); } .mix-bar i.m3 { background: var(--lime); }
.mix-leg { font-family: var(--mono); font-size: 0.6rem; color: var(--on-pine-3); display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.mix-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 0.4em; vertical-align: middle; }
.bags--3 { grid-template-columns: repeat(3, 1fr); transition: opacity 0.55s var(--ease); }
.js .canvas--bridge:not(.p1) .yrs3 { opacity: 0; transform: translateY(10px); }
.js .canvas--bridge:not(.p2) .bridge { opacity: 0; }
.js .canvas--bridge:not(.p2) .bbar-fill { transform: scaleX(0); }
.js .canvas--bridge:not(.p3) .mix, .js .canvas--bridge:not(.p3) .bags--3 { opacity: 0; }
.js .canvas--bridge:not(.p3) .mix-bar i { transform: scaleX(0); }
.js .canvas--bridge:not(.p4) .concl { opacity: 0; transform: translateY(10px); }

/* ── Precios Top: cuatro semanas, precio sube, unidades caen ── */
.film-grid { transition: opacity 0.55s var(--ease); }
.js .canvas--film:not(.p1) .film-grid { opacity: 0; }
.js .canvas--film:not(.p2) .film-grid .cell.is-sig { color: inherit; }
.js .canvas--film:not(.p2) .film-grid .cell.is-sig b { color: var(--on-pine); }
.js .canvas--film:not(.p3) .concl { opacity: 0; transform: translateY(10px); }
.film-grid .cell.is-sig b { transition: color 0.4s var(--ease); }

/* ── Pauta × producto: fuerte sin exposición vs inversión sin rotación ── */
.canvas--pauta .canvas-body { display: grid; gap: 1rem; }
.pa { display: grid; gap: 0.3rem; transition: opacity 0.55s var(--ease), transform 0.6s var(--ease-out); }
.pa .pr-row { grid-template-columns: 1fr 1.1fr 0.9fr 0.6fr 0.8fr 1.5fr; opacity: 1; transform: none; }
.pa .pr-row:not(.is-h) { color: var(--on-pine-2); }
.pa .pr-row.is-lo { border-color: var(--lime); background: var(--panel-2); color: var(--on-pine); }
.pa .pr-row.is-hi { border-color: var(--coral); background: rgba(255, 92, 57, 0.08); color: var(--on-pine); }
.pa .c-exp { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; }
.pa .c-exp i { display: block; height: 8px; border-radius: 4px; background: var(--pine-hair); overflow: hidden; }
.pa .c-exp i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--on-pine-3); border-radius: 4px; transform-origin: left center; transition: transform 0.7s var(--ease-out); }
.pa .is-hi .c-exp i::after { background: var(--coral); }
.pa .is-lo .c-exp i::after { background: var(--lime); }
.pa .c-exp small { font-family: var(--mono); font-size: 0.7rem; color: inherit; }
.js .canvas--pauta:not(.p1) .pa { opacity: 0; transform: translateY(12px); }
.js .canvas--pauta:not(.p1) .pa .c-exp i::after { transform: scaleX(0); }
.js .canvas--pauta:not(.p2) .pa .pr-row.is-lo, .js .canvas--pauta:not(.p2) .pa .pr-row.is-hi { border-color: var(--pine-hair); background: var(--panel); color: var(--on-pine-2); }
.js .canvas--pauta:not(.p3) .concl { opacity: 0; transform: translateY(10px); }

/* ── Tres ideas (editorial, claro) ── */
.ideas { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.idea { display: grid; gap: 0.8rem; align-content: start; padding: 1.4rem; border-radius: var(--r-canvas); background: var(--bg); border: 1px solid var(--hair); }
.idea .k { color: var(--violet); }
.idea h3 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); letter-spacing: -0.02em; }
.idea > p { color: var(--ink-2); font-size: 0.95rem; }
.idea-fig { border-top: 1px solid var(--hair); padding-top: 0.8rem; display: grid; gap: 0.4rem; font-size: 0.84rem; }
.idea-fig .row { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: baseline; color: var(--ink-2); }
.idea-fig .row b { font-family: var(--display); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; font-size: 1rem; white-space: nowrap; }
.idea-fig .row.is-sig b { color: var(--coral-ink); }
.idea-fig .row.is-ok b { color: var(--green); }
.idea-fig .row.is-dim { color: var(--ink-3); } .idea-fig .row.is-dim b { color: var(--ink-3); font-weight: 500; }
.idea-fig .bar { height: 7px; background: var(--mist-2); border-radius: 4px; }
.idea-fig .bar i { display: block; height: 100%; width: var(--w); min-width: 4px; background: var(--ink); border-radius: 4px; }
.idea-fig .bar.is-ok i { background: var(--green); }
.idea-fig .bar.is-sig i { background: var(--coral); }
.idea-fig .src { display: block; }
.idea-take { font-size: 0.93rem; color: var(--ink); border-left: 3px solid var(--lime); padding-left: 0.8rem; line-height: 1.45; }
.idea .link-arrow { margin-top: 0.1rem; }

/* ── Plan de acción (demo) ── */
.plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.plan-list li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--hair); border-radius: var(--r); background: var(--bg); }
.plan-list .pn { font-family: var(--mono); font-size: 0.7rem; font-weight: 500; color: var(--violet); padding-top: 0.2rem; }
.plan-list b { display: block; font-weight: 600; color: var(--ink); margin-bottom: 0.2rem; }
.plan-list p { font-size: 0.9rem; color: var(--ink-2); }
.plan-list .src { display: block; margin-top: 0.3rem; }

/* ── Preguntas del gerente (/producto) ── */
.qs { list-style: none; padding: 0; margin: 0.2rem 0 0; display: grid; gap: 0.55rem; }
.qs li { display: grid; gap: 0.1rem; padding-left: 1rem; border-left: 2px solid var(--hair); }
.qs b { font-weight: 600; color: var(--ink); font-size: 0.97rem; }
.qs span { font-size: 0.86rem; color: var(--ink-3); }

@media (min-width: 720px) {
  .concl { grid-template-columns: 1fr auto; }
  .pr-top { grid-template-columns: 1.35fr repeat(4, 1fr); }
  .pr-venta { grid-column: auto; }
  .cross { grid-template-columns: 1fr auto 1.15fr; gap: 2.4rem; }
  .cross-srcs { grid-template-columns: 1fr; }
  .cross-hub::before, .cross-hub::after { display: none; }
  .ideas { grid-template-columns: repeat(3, 1fr); }
  .yrs3 { gap: 0.4rem 1.6rem; }
}
@media (max-width: 719px) {
  .pr-ordenes, .pr-ticket, .pr-trafico { display: none; }
  .pr-row { grid-template-columns: 1.1fr 1fr 1fr 0.7fr; gap: 0.4rem; padding-inline: 0.6rem; font-size: 0.78rem; }
  .pr-row .c-clase, .pr-row .c-precio, .pr-row .c-stock { display: none; }
  .pa .pr-row { grid-template-columns: 1fr 0.8fr 0.8fr 1.4fr; }
  .pa .c-clase, .pa .c-stock { display: none; }
  .bbar { grid-template-columns: 1fr auto; }
  .bbar-track { grid-column: 1 / -1; }
  .bags--3 { grid-template-columns: 1fr 1fr; }
  .yrs3 { gap: 0.3rem 0.45rem; grid-template-columns: minmax(0, auto) repeat(3, minmax(0, 1fr)); }
  .yrs3 .yv { font-size: 0.8rem; }
  .yrs3 .yv.is-big { font-size: 0.92rem; }
  .yrs3 .yl { font-size: 0.7rem; }
  .yrs3 .yh { font-size: 0.56rem; }
  .bbar-lbl small, .bridge-h .k { white-space: normal; }
  .bridge-h { display: grid; }
}
@media (max-width: 540px) {
  .canvas-title > span, .canvas-meta > span { display: none; }
  .canvas-head { gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-seq] * { transition: none !important; animation: none !important; }
}