/* ============================================================================
   ENCUADRE · CAPA MATERIAL CANÓNICA
   Portada desde lab_encuadre_rocalde (validación 2026-09-20).
   Se carga sólo en páginas con data-rh-encuadre="on".
   ========================================================================== */

:root {
  --rh-c-navy: #1B4F72;
  --rh-c-teal: #1E9BC4;
  --rh-c-teal-dark: #1F7A8C;
  --rh-c-orange: #F26A1B;
  --rh-c-ink: #0F2D44;
  --rh-c-bg-light: #F4F7FA;
  --rh-c-bg-warm: #FAFAF5;
  --rh-c-bg-dark: #080E18;
  --rh-c-surface: #173042;
  --rh-c-border: #D6DEE3;
  --rh-c-cream: #F3F1D7;
  --rh-c-text-on-dark: rgba(244, 247, 250, 0.92);
  --rh-c-text-dim-on-dark: rgba(198, 214, 226, 0.72);
  --rh-c-line-on-dark: rgba(214, 222, 227, 0.13);
  --rh-c-glass: rgba(23, 48, 66, 0.55);
  --rh-c-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Luz clave única: arriba-izquierda; las sombras caen abajo-derecha. */
  --rh-light-x: -0.26;
  --rh-light-y: -0.97;
  --rh-light-angle: 105deg;
  --rh-light-origin: 22% 8%;

  --rh-elev-0: none;
  --rh-elev-1: 0 1px 2px rgba(8, 14, 24, 0.24), 3px 6px 16px rgba(8, 14, 24, 0.18);
  --rh-elev-2: 0 2px 4px rgba(8, 14, 24, 0.28), 6px 14px 34px rgba(8, 14, 24, 0.24);
  --rh-elev-3: 0 4px 8px rgba(8, 14, 24, 0.32), 12px 28px 64px rgba(8, 14, 24, 0.30);
  --rh-elev-1-light: 0 1px 2px rgba(15, 45, 68, 0.10), 3px 6px 16px rgba(15, 45, 68, 0.08);
  --rh-elev-2-light: 0 2px 4px rgba(15, 45, 68, 0.12), 6px 14px 34px rgba(15, 45, 68, 0.10);
  --rh-elev-3-light: 0 4px 8px rgba(15, 45, 68, 0.14), 12px 28px 64px rgba(15, 45, 68, 0.13);

  --rh-mat-deep: var(--rh-c-bg-dark);
  --rh-mat-raised: var(--rh-c-surface);
  --rh-mat-read: var(--rh-c-bg-light);
  --rh-mat-read-warm: var(--rh-c-bg-warm);
  --rh-mat-veil: var(--rh-c-glass);
  --rh-frame-line: rgba(214, 222, 227, 0.22);
  --rh-frame-line-light: rgba(15, 45, 68, 0.14);

  --rh-grain-dark: 0.06;
  --rh-grain-light: 0.025;
  --rh-z-back: -60px;
  --rh-z-mid: 0px;
  --rh-z-front: 40px;
  --rh-scale-back: 0.96;
  --rh-scale-mid: 1;
  --rh-scale-front: 1.03;
  --rh-perspective: 1200px;

  --rh-t-press: 120ms;
  --rh-t-hover: 180ms;
  --rh-t-ui: 240ms;
  --rh-t-scene: 420ms;
  --rh-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --rh-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --rh-ease-hover: ease;
  --rh-lit-edge: inset 1px 1px 0 rgba(255, 255, 255, 0.07);
  --rh-lit-edge-light: inset 1px 1px 0 rgba(255, 255, 255, 0.92);
}

.rocalde-home {
  --rh-navy: var(--rh-c-navy);
  --rh-teal: var(--rh-c-teal);
  --rh-teal-dark: var(--rh-c-teal-dark);
  --rh-orange: var(--rh-c-orange);
  --rh-ink: var(--rh-c-ink);
  --rh-bg-light: var(--rh-c-bg-light);
  --rh-bg-warm: var(--rh-c-bg-warm);
  --rh-bg-dark: var(--rh-c-bg-dark);
  --rh-surface: var(--rh-c-surface);
  --rh-border: var(--rh-c-border);
  --rh-cream: var(--rh-c-cream);
  --rh-text-on-dark: var(--rh-c-text-on-dark);
  --rh-text-dim-on-dark: var(--rh-c-text-dim-on-dark);
  --rh-line-on-dark: var(--rh-c-line-on-dark);
  --rh-glass: var(--rh-c-glass);
  --rh-font: var(--rh-c-font);
  --rh-ease: var(--rh-ease-out);
}

/* El grano pertenece al documento, no al cristal del viewport. */
.enc-grain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: var(--rh-grain-dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23g)'/></svg>");
  background-size: 160px 160px;
}
.enc-grain--light { opacity: var(--rh-grain-light); }

/* Material y elevación unificados en las dos páginas portadas. */
.rocalde-home .rh-fork__card,
.rocalde-home .rh-diag,
.rocalde-home .rh-route,
.rocalde-home .rh-av__card,
.rocalde-home .rh-sys__row {
  box-shadow: var(--rh-elev-1), var(--rh-lit-edge);
  transition: transform var(--rh-t-ui) var(--rh-ease-out),
              box-shadow var(--rh-t-ui) var(--rh-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rocalde-home .rh-fork__card:hover,
  .rocalde-home .rh-diag:hover,
  .rocalde-home .rh-route:hover,
  .rocalde-home .rh-av__card:hover {
    box-shadow: var(--rh-elev-2), var(--rh-lit-edge);
  }
}
.rocalde-home .rh-sect--light .rh-step,
.rocalde-home .rh-sect--light .rh-card,
.rocalde-home .rh-ladder__step {
  box-shadow: var(--rh-elev-1-light), var(--rh-lit-edge-light);
}
.rocalde-home .rh-win.is-front,
.rocalde-home .rh-lightbox__fig { box-shadow: var(--rh-elev-3), var(--rh-lit-edge); }
.rocalde-home .rh-btn--primary { box-shadow: var(--rh-elev-1), var(--rh-lit-edge); }
.rocalde-home .rh-btn,
.rocalde-home .rh-btn--primary,
.rocalde-home .rh-btn--ghost {
  transition: transform var(--rh-t-press) var(--rh-ease-out),
              box-shadow var(--rh-t-hover) var(--rh-ease-out),
              background-color var(--rh-t-hover) var(--rh-ease-hover),
              color var(--rh-t-hover) var(--rh-ease-hover);
}
.rocalde-home .rh-btn:active,
.rocalde-home .rh-btn--primary:active,
.rocalde-home .rh-btn--ghost:active { transform: scale(0.97); }

/* Las superficies que se mueven dejan de recomponer blur cada frame. */
.rocalde-home .rh-fork__card,
.rocalde-home .rh-diag,
.rocalde-home .rh-route,
.rocalde-home .rh-step,
.rocalde-home .rh-tier,
.rocalde-home .rh-btn--ghost {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.rocalde-home .rh-fork__card,
.rocalde-home .rh-diag,
.rocalde-home .rh-route {
  background-color: color-mix(in srgb, var(--rh-mat-raised) 88%, #000);
  border-color: var(--rh-frame-line);
}
.rocalde-home .rh-btn--ghost { background-color: rgba(23, 48, 66, 0.72); }

/* Eje narrativo sobrio para Sistemas; Home conserva el eje de Fase 2. */
.enc-axis {
  position: fixed;
  inset: 0 auto 0 var(--enc-axis-x, 48px);
  width: 1px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--rh-t-scene) var(--rh-ease-out);
}
.enc-axis.is-on { opacity: 1; }
.enc-axis__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0, var(--rh-c-line-on-dark) 12%, var(--rh-c-line-on-dark) 88%, transparent 100%);
}
.enc-axis__lit {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  transform-origin: 50% 0;
  transform: scaleY(0);
  background: linear-gradient(to bottom, transparent 0, var(--rh-c-teal) 18%, var(--rh-c-teal) 82%, transparent 100%);
  opacity: 0.55;
}
.enc-axis.is-dim .enc-axis__base { opacity: 0.35; }
.enc-axis.is-dim .enc-axis__lit { opacity: 0.28; }
.rocalde-home .rh-axis.is-dim { opacity: 0.42; }

/* Costura sólo en el cambio real claro ↔ oscuro. */
.enc-seam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(to right, transparent 0, var(--enc-seam-color, var(--rh-c-line-on-dark)) 18%, var(--enc-seam-color, var(--rh-c-line-on-dark)) 82%, transparent 100%);
  opacity: 0.9;
}
.enc-seamed { position: relative; }

/* Escalera N3: ensamblaje en Y y luz, sin perspective/preserve-3d. */
.enc-ladder .rh-ladder__step {
  transform: translate3d(0, 14px, 0) scale(var(--rh-scale-back));
  opacity: 0.55;
  transition: transform var(--rh-t-scene) var(--rh-ease-out),
              opacity var(--rh-t-scene) var(--rh-ease-out),
              box-shadow var(--rh-t-scene) var(--rh-ease-out),
              border-top-color var(--rh-t-ui) var(--rh-ease-hover);
  will-change: transform;
}
.enc-ladder .rh-ladder__step.is-set {
  transform: translate3d(0, 0, 0) scale(var(--rh-scale-mid));
  opacity: 1;
}
.enc-ladder .rh-ladder__step.is-lit { box-shadow: var(--rh-elev-2-light), var(--rh-lit-edge-light); }
.enc-ladder .rh-ladder__step.is-lit .rh-ladder__n { color: var(--rh-c-teal); }
.enc-ladder .rh-ladder__step--4.is-lit .rh-ladder__n { color: var(--rh-c-orange); }
.enc-ladder .rh-ladder__base {
  transform: translate3d(0, 10px, 0) scale(var(--rh-scale-back));
  opacity: 0.6;
  transition: transform var(--rh-t-scene) var(--rh-ease-out), opacity var(--rh-t-scene) var(--rh-ease-out);
}
.enc-ladder.is-based .rh-ladder__base { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .enc-ladder .rh-ladder__step.is-set:hover {
    transform: translate3d(0, -4px, 0) scale(var(--rh-scale-front));
    box-shadow: var(--rh-elev-3-light), var(--rh-lit-edge-light);
  }
}

/* M2 · EL CORTE: el hero retrocede y la sección 01 ocluye. */
.enc-m2 .rh-hero { position: sticky; top: 0; z-index: 0; }
.enc-m2 .rh-hero.is-cut { position: relative; }
.enc-m2 .rh-hero.is-cut .rh-emblem *,
.enc-m2 .rh-hero.is-cut .rh-flow i { animation-play-state: paused; }
.enc-m2 .rh-hero__inner { transform-origin: 50% 38%; will-change: transform, opacity; }
.enc-m2 .rh-hero__bg { will-change: opacity; }
.enc-m2 .rh-hero + section { position: relative; z-index: 1; }
.enc-m2 .rh-hero__frame i {
  will-change: transform;
  transition: border-color var(--rh-t-scene) var(--rh-ease-hover);
}
.enc-m2 .rh-hero__frame.is-tight i { border-color: rgba(30, 155, 196, 0.40); }
.enc-m2 .rh-axis { transition: opacity var(--rh-t-scene) var(--rh-ease-out); }

.rocalde-home .rh-sect--light {
  background-image: linear-gradient(var(--rh-light-angle), rgba(255, 255, 255, 0.85) 0%, rgba(244, 247, 250, 0) 42%);
}

@media (max-width: 860px) {
  .enc-m2 .rh-hero { position: relative; perspective: none; }
}
@media (max-width: 760px) {
  .enc-ladder .rh-ladder__step { transform: translate3d(0, 10px, 0) scale(0.99); }
  .enc-ladder .rh-ladder__step.is-set { transform: none; }
  .enc-axis { left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .enc-ladder .rh-ladder__step,
  .enc-ladder .rh-ladder__base {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .enc-axis { opacity: 1 !important; transition: none !important; }
  .enc-axis__lit { transform: scaleY(1) !important; }
  .enc-m2 .rh-hero { position: relative !important; }
  .enc-m2 .rh-hero__inner { transform: none !important; opacity: 1 !important; }
  .enc-m2 .rh-hero__frame i { transform: none !important; }
  .rocalde-home .rh-btn:active,
  .rocalde-home .rh-btn--primary:active,
  .rocalde-home .rh-btn--ghost:active { transform: none; }
}