/* css/brochure.css — capa propia de las páginas /brochures/. Se apoya en
   css/site.css (hojas, tarjetas, pasos, botones) y agrega sólo lo que hace de
   la página un brochure: progreso de lectura, barrido de la portada, riel de
   secciones, ruta 01→04 que se dibuja y la lista de puntos de entrada.
   Todo el movimiento se apaga con prefers-reduced-motion (regla de site.css). */

/* ---------- Progreso de lectura ---------- */
.bro-progress{position:fixed;z-index:120;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue-hi));transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none}

/* ---------- Portada ---------- */
.bro-hero h1{max-width:16ch}
.bro-scan{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.bro-scan::before{content:"";position:absolute;left:0;right:0;top:0;height:34%;background:linear-gradient(180deg,transparent,rgba(141,209,255,.05) 70%,rgba(141,209,255,.16));border-bottom:1px solid rgba(141,209,255,.34);transform:translateY(-100%);animation:bro-scan 8s cubic-bezier(.4,0,.2,1) 1.2s infinite}
@keyframes bro-scan{0%{transform:translateY(-100%);opacity:0}10%{opacity:1}75%{opacity:.5}100%{transform:translateY(300%);opacity:0}}
.bro button.btn--ghost{border:0;background:none;cursor:pointer}
.bro button.btn--ghost.is-copied{color:var(--accent)}.bro button.btn--ghost.is-copied b{background:var(--accent)}

/* ---------- Riel de secciones ---------- */
.bro-rail{position:fixed;z-index:90;top:50%;right:22px;display:grid;gap:13px;transform:translateY(-50%);--rail:rgba(255,255,255,.4);--rail-on:#8dd1ff;--rail-ink:#f3f5f6;--rail-bg:rgba(8,13,17,.86)}
.bro-rail--clara{--rail:rgba(8,22,30,.34);--rail-on:#287fbe;--rail-ink:#080b0e;--rail-bg:rgba(255,255,255,.9)}
.bro-rail a{position:relative;display:block;width:9px;height:9px;border-radius:50%;background:var(--rail);transition:background .3s ease,box-shadow .4s var(--ease)}
.bro-rail a::after{content:"";position:absolute;inset:-7px}
.bro-rail a.is-active{background:var(--rail-on);box-shadow:0 0 0 4px color-mix(in srgb,var(--rail-on) 26%,transparent)}
.bro-rail a span{position:absolute;top:50%;right:24px;padding:6px 10px;border-radius:999px;background:var(--rail-bg);color:var(--rail-ink);font:500 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translate(6px,-50%);transition:opacity .25s ease,transform .35s var(--ease);pointer-events:none}
.bro-rail a:hover span,.bro-rail a:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media(max-width:1240px){.bro-rail{display:none}}

/* ---------- Tarjetas: luz que sigue al puntero ---------- */
.bro .cards:not(.cards--plain) .card{overflow:hidden}
.bro .cards:not(.cards--plain) .card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%);opacity:0;transition:opacity .45s ease;pointer-events:none}
.bro .cards:not(.cards--plain) .card:hover::before{opacity:1}
.bro .card>*{position:relative}
.bro .card--num .num{white-space:nowrap}

/* El acento de cada paso y de cada tarjeta lineal se dibuja al entrar. */
.rvjs .bro .step.reveal::before,.rvjs .bro .cards--plain .card.reveal::before{width:0;transition:width 1s var(--ease) .3s}
.rvjs .bro .step.reveal.is-visible::before,.rvjs .bro .cards--plain .card.reveal.is-visible::before{width:44px}
.bro .steps{gap:14px clamp(20px,3vw,44px)}
.bro .reveal:nth-child(7){transition-delay:.36s}.bro .reveal:nth-child(8){transition-delay:.42s}
.bro-after{margin-top:clamp(36px,5vw,64px)}

/* ---------- Ruta 01 → 04 ---------- */
.bro-route{margin-top:clamp(36px,5vw,64px);padding:clamp(22px,3vw,34px);border:1px solid var(--card-border);border-radius:24px;background:var(--card-bg);box-shadow:var(--card-shadow)}
.bro-route ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:8px 0 0;padding:0;list-style:none}
.bro-route ol::before,.bro-route ol::after{content:"";position:absolute;top:22px;left:22px;right:calc(25% - 31px);height:1px;background:var(--line)}
.bro-route ol::after{height:2px;top:21.5px;background:var(--accent);transform:scaleX(1);transform-origin:0 50%}
.rvjs .bro-route ol::after{transform:scaleX(0);transition:transform 1.8s var(--ease) .35s}
.rvjs .bro-route.is-visible ol::after{transform:scaleX(1)}
.bro-route li{position:relative;z-index:1;display:grid;gap:12px;justify-items:start}
.bro-route li b{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid var(--accent);border-radius:50%;background:var(--accent);color:var(--ink-inverse);font:600 12px/1 var(--mono);letter-spacing:.04em}
.rvjs .bro-route li b{background:#e9ecee;color:var(--accent);transition:background .5s ease,color .5s ease,transform .6s var(--ease)}
.rvjs .sheet--dark .bro-route li b{background:#0b1217}
.rvjs .bro-route.is-visible li b{background:var(--accent);color:var(--ink-inverse)}
.rvjs .bro-route.is-visible li:nth-child(1) b{transition-delay:.35s}.rvjs .bro-route.is-visible li:nth-child(2) b{transition-delay:.9s}.rvjs .bro-route.is-visible li:nth-child(3) b{transition-delay:1.45s}.rvjs .bro-route.is-visible li:nth-child(4) b{transition-delay:2s}
.bro-route li span{font-family:var(--display);font-size:clamp(14px,1.3vw,17px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.bro-route>p:last-child{max-width:820px;margin:26px 0 0;color:var(--ink-2);font-size:14px;line-height:1.6}

/* ---------- Puntos de entrada ---------- */
.bro-entry{border-bottom:1px solid var(--line)}
.bro-entry__row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:clamp(14px,3vw,40px);align-items:center;padding:19px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;transition:padding .45s var(--ease),color .3s ease}
.bro-entry__row::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.bro-entry__row::after{content:"→";display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--arrow-bg);color:var(--arrow-ink);font-size:14px;transition:transform .35s var(--ease),background .3s ease,color .3s ease}
.bro-entry__row:hover{padding-left:14px}.bro-entry__row:hover::before{transform:scaleX(1)}
.bro-entry__row:hover::after{transform:translateX(3px);background:var(--accent);color:var(--ink-inverse)}
.bro-entry__q{font-family:var(--display);font-size:clamp(17px,1.9vw,25px);font-weight:560;letter-spacing:-.035em;line-height:1.12}
.bro-entry__s{display:grid;gap:4px;justify-items:end;text-align:right}
.bro-entry__s i{color:var(--accent);font:500 9px/1.4 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase}
.bro-entry__s b{color:var(--ink-2);font-size:13px;font-weight:500}

/* ---------- Responsive ---------- */
@media(max-width:600px){
  .bro-route ol{grid-template-columns:1fr;gap:18px}
  .bro-route ol::before,.bro-route ol::after{top:22px;bottom:22px;left:21.5px;right:auto;width:1px;height:auto}
  .bro-route ol::after{width:2px;left:21px;transform-origin:50% 0}
  .rvjs .bro-route ol::after{transform:scaleY(0)}.rvjs .bro-route.is-visible ol::after{transform:scaleY(1)}
  .bro-route li{grid-template-columns:44px 1fr;align-items:center}
  .bro-entry__row{grid-template-columns:minmax(0,1fr) 28px;gap:6px 14px;padding:16px 0}
  .bro-entry__s{grid-column:1;grid-row:2;justify-items:start;text-align:left;grid-auto-flow:column;justify-content:start;gap:10px;align-items:baseline}
  .bro-entry__row::after{grid-column:2;grid-row:1/3}
  .bro .page-hero .actions button.btn--ghost{width:auto;align-self:flex-start}
}