/* KONDOR · versión de prueba 2: retícula visible, scrollytelling,
   calculadora, llamado persistente y hora local. Se carga después de styles.css. */
@layer components {
  .eyebrow--muted { color: var(--ink-soft); }

  /* ---------- Retícula suiza visible (brandbook §30: seis columnas) ---------- */
  .hero { position: relative; }
  .hero > .wrap { position: relative; z-index: 1; }
  .grid-lines {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
    display: grid; grid-template-columns: repeat(6, 1fr);
  }
  .grid-lines i { border-inline-start: 1px solid var(--gray-light); transform-origin: 50% 0; }
  .grid-lines i:last-child { border-inline-end: 1px solid var(--gray-light); }
  .hero-meta { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }

  /* ---------- Calculadora ---------- */
  .calc { display: grid; grid-template-columns: 7fr 5fr; gap: 8px; }
  .calc-in { border: 1px solid var(--gray-light); padding: clamp(24px, 3.4vw, 52px); display: grid; gap: 40px; align-content: center; }
  .range { display: grid; grid-template-columns: 1fr auto; gap: 14px 16px; align-items: end; }
  .range label { font: 500 10.5px/1.5 var(--font-title); letter-spacing: .2em; text-transform: uppercase; max-width: 34ch; }
  .range output { font: 300 34px/1 var(--font-title); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .range input { grid-column: 1 / -1; }

  input[type="range"] {
    --fill: 0%;
    appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(to right, var(--teal) var(--fill), var(--black) var(--fill)); /* dos tintas planas, sin degradado */
  }
  input[type="range"]::-webkit-slider-thumb {
    appearance: none; width: 18px; height: 18px; margin-top: -8px; border: 0; border-radius: 0; background: var(--black);
    transition: background-color .25s var(--ease), scale .25s var(--ease);
  }
  input[type="range"]::-moz-range-track { height: 2px; background: var(--black); }
  input[type="range"]::-moz-range-progress { height: 2px; background: var(--teal); }
  input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 0; background: var(--black); }
  input[type="range"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 6px; }
  input[type="range"]:active::-webkit-slider-thumb { background: var(--teal-dark); scale: 1.15; }
  @media (hover: hover) { input[type="range"]:hover::-webkit-slider-thumb { background: var(--teal-dark); } }

  .calc-out { padding: clamp(24px, 3.4vw, 52px); display: flex; flex-direction: column; gap: 28px; justify-content: space-between; }
  .calc-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; font: 300 clamp(60px, 7.4vw, 112px)/.95 var(--font-title); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
  .calc-total .unit { font: 500 17px/1 var(--font-title); letter-spacing: 0; color: var(--gray-light); }
  .calc-eq { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0; padding-block-start: 20px; border-block-start: 1px solid var(--line-dark); }
  .calc-eq dt { font-size: 13px; color: var(--gray); }
  .calc-eq dd { margin: 4px 0 0; font: 300 32px/1.1 var(--font-title); font-variant-numeric: tabular-nums; }
  @media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }

  /* Sin JavaScript los controles no recalculan: se explica la fórmula con
     los valores de ejemplo que ya muestra el resultado. */
  .no-js #calc, .js .calc-fallback { display: none; }
  .calc-fallback { gap: 16px; }
  .calc-fallback p:not(.eyebrow) { max-width: 46ch; }

  /* Reloj: sin JavaScript se muestra la zona horaria fija de Costa Rica. */
  .no-js [data-clock], .js .clock-fallback { display: none; }

  /* ---------- Scrollytelling con diagrama de líneas ---------- */
  .story { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
  .story-fig { position: sticky; top: calc(var(--header) + 40px); margin: 0; }
  .story-cap { margin-block-start: 16px; padding-block-start: 14px; border-block-start: 1px solid var(--gray-light); font: 500 10.5px/1.6 var(--font-title); letter-spacing: .2em; text-transform: uppercase; color: var(--teal-dark); }
  .story-steps li { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; border-block-start: 1px solid var(--gray-light); }
  .story-steps li:first-child { border-block-start: 0; }
  .story-steps .n { font: 500 10.5px/1 var(--font-title); letter-spacing: .2em; color: var(--teal-dark); }
  .story-steps h3 { font: 600 clamp(26px, 2.6vw, 36px)/1.1 var(--font-title); letter-spacing: -.02em; margin-block: 14px 12px; color: var(--ink-soft); transition: color .5s var(--ease); }
  .story-steps p { font-size: 18px; line-height: 1.65; color: var(--ink-soft); max-width: 38ch; }
  .story-steps li.is-active h3 { color: var(--black); }

  .diagram { display: block; width: 100%; height: auto; overflow: visible; }
  .diagram text { font: 500 14px var(--font-title); fill: var(--black); }
  .node { transition: translate 1s var(--ease), opacity .6s var(--ease); }
  .node rect { fill: var(--white); stroke: var(--black); stroke-width: 1.5; }
  .node--core rect { fill: var(--black); }
  .node--core text { fill: var(--white); }
  .stubs path { fill: none; stroke: var(--gray); stroke-width: 1.5; stroke-dasharray: 4 4; transition: opacity .4s var(--ease); }
  .links path { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
  .links path:nth-child(2) { transition-delay: .12s; }
  .links path:nth-child(3) { transition-delay: .24s; }
  .links path:nth-child(4) { transition-delay: .36s; }
  /* Acotado al diagrama: .measure también es un párrafo de la sección IA. */
  .diagram .measure { opacity: 0; transition: opacity .5s var(--ease); }
  .measure .m-label { font: 500 11px var(--font-title); letter-spacing: .2em; text-transform: uppercase; fill: var(--teal-dark); }
  .measure .m-note { font: 400 12px var(--font-body); fill: var(--ink-soft); }
  .m-axis { fill: none; stroke: var(--black); stroke-width: 1; }
  .m-base { fill: none; stroke: var(--gray); stroke-width: 1.5; stroke-dasharray: 4 4; }
  .m-line { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linejoin: miter; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s .3s var(--ease); }

  /* Estado 0: sistemas sueltos y desalineados */
  .n-ventas { translate: 40px 46px; }
  .n-inv { translate: 400px 76px; }
  .n-fac { translate: 70px 248px; }
  .n-con { translate: 420px 330px; }
  .n-xls { translate: 230px 410px; }
  .n-core { translate: 245px 232px; opacity: 0; }
  /* Estado 1+: alineados a la retícula alrededor de la operación */
  .diagram:not([data-stage="0"]) .stubs path { opacity: 0; }
  .diagram:not([data-stage="0"]) .n-ventas { translate: 40px 60px; }
  .diagram:not([data-stage="0"]) .n-inv { translate: 450px 60px; }
  .diagram:not([data-stage="0"]) .n-fac { translate: 40px 232px; }
  .diagram:not([data-stage="0"]) .n-con { translate: 450px 232px; }
  .diagram:not([data-stage="0"]) .n-core { opacity: 1; }
  .diagram:not([data-stage="0"]) .n-xls { translate: 245px 400px; opacity: .35; }
  /* Estado 2+: conexiones */
  .diagram:is([data-stage="2"], [data-stage="3"]) .links path { stroke-dashoffset: 0; }
  .diagram:is([data-stage="2"], [data-stage="3"]) .n-xls { translate: 245px 430px; opacity: 0; }
  /* Estado 3: indicador con línea base */
  .diagram[data-stage="3"] .measure { opacity: 1; }
  .diagram[data-stage="3"] .m-line { stroke-dashoffset: 0; }

  @media (max-width: 900px) {
    .story { grid-template-columns: 1fr; gap: 0; }
    .story-fig { top: var(--header); z-index: 2; background: var(--white); padding-block: 12px 0; }
    .diagram { max-height: 36vh; }
    .story-steps li { min-height: 56vh; }
  }

  /* ---------- Llamado persistente ---------- */
  .sticky-cta {
    position: fixed; z-index: 15; inset-block-end: 24px; inset-inline-end: var(--gutter);
    translate: 0 calc(100% + 40px); opacity: 0; visibility: hidden;
    transition: translate .5s var(--ease), opacity .3s var(--ease), visibility 0s linear .5s, color .45s var(--ease), border-color .45s var(--ease);
  }
  .sticky-cta.is-shown { translate: 0 0; opacity: 1; visibility: visible; transition-delay: 0s; }
  @media (max-width: 600px) {
    .sticky-cta { inset-inline: 16px; inset-block-end: 16px; justify-content: center; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .js .grid-lines i { transform: scaleY(0); transition: transform 1.6s var(--ease); }
    .js .grid-lines i:nth-child(2) { transition-delay: .08s; }
    .js .grid-lines i:nth-child(3) { transition-delay: .16s; }
    .js .grid-lines i:nth-child(4) { transition-delay: .24s; }
    .js .grid-lines i:nth-child(5) { transition-delay: .32s; }
    .js .grid-lines i:nth-child(6) { transition-delay: .4s; }
    .js .hero.is-in .grid-lines i { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .node, .links path, .m-line, .diagram .measure, .stubs path, .sticky-cta { transition: none; }
  }
}

@layer utilities {
  @media print {
    .sticky-cta, .grid-lines { display: none !important; }
    .story-fig { position: static; }
  }
}