/* ==========================================================
   RuGo v099 — PROYECTOS ESPECIALES / TRUE SERVICES PARITY

   Source authority:
   actual APPROVED v093 source files.

   Critical root cause corrected:
   SERVICES typography variables are scoped to .core-panel--services.
   When prior experiments reused SERVICES classes outside that scope,
   variables such as --services-title-scale were undefined.

   v099:
   1. defines the EXACT approved SERVICES variables on this branch;
   2. uses the actual SERVICES classes for title/statement/layout;
   3. places the actual services-architecture directly in the full branch
      viewport, so X geometry matches the SERVICIOS screen;
   4. uses static HTML — no runtime cloning;
   5. uses a tiny alignment script only to reproduce the original first
      DISEÑO vertical offset after replacing content and adding a 4th item;
   6. preserves the shared PROJECTS third.
   ========================================================== */

.branch-panel--services.special-projects-v099{
  /* EXACT values copied from .core-panel--services in approved v093 */
  --services-line:rgba(17,17,15,.18);
  --services-muted:rgba(17,17,15,.64);
  --services-red:var(--launch-accent,#e1261c);
  --services-title-measure:clamp(360px,33.5vw,560px);
  --services-title-scale:clamp(38px,calc((100cqh / 8) * .583),74px);
  --services-title-leading:.90;
  --services-statement-scale:clamp(13px,calc((100cqh / 8) * .175),18px);
  --services-left-axis:calc((100cqh / 8) * .30);
  --services-item-gap:calc((100cqh / 8) * .32);

  /* Exact DETALLES CTA color/arrow variables needed outside detail screen */
  --detail-ink:var(--launch-ink,#11110f);
  --detail-red:var(--launch-accent,var(--launch-red,#e1261c));
  --rugo-master-arrow-glyph:"↓";
  --rugo-master-arrow-size:22px;
  --rugo-master-arrow-weight:700;
  --rugo-master-arrow-box:22px;
  --rugo-master-arrow-leading:1;

  position:relative;
  background:var(--launch-paper,#f4f1ea);
}

/* Actual SERVICES architecture.
   Same class + same full-screen containing block = same approved X geometry. */
.special-projects-v099__architecture{
  z-index:18;
  pointer-events:none;
}

/* Do not center four different-content families.
   The script supplies the exact original first-title top offset from DISEÑO. */
.special-projects-v099__overview{
  justify-content:flex-start!important;
  padding-top:var(--special-projects-v099-first-top,0px);
}

/* Keep the same actual SERVICES title/statement system, static in this branch. */
.special-projects-v099 .services-overview-family{
  cursor:default;
  pointer-events:none;
}

.special-projects-v099 .services-overview-family:hover .services-overview-family__title,
.special-projects-v099 .services-overview-family:focus-visible .services-overview-family__title{
  color:var(--launch-ink)!important;
}

/* Fourth family:
   absolute child of the third direct SERVICES family.
   It does not participate in flex sizing, so it cannot move the first three.
   Its box starts exactly one approved SERVICES gap below INTEGRACIÓN. */
.special-projects-v099__integration{
  overflow:visible;
}

.special-projects-v099__development{
  position:absolute!important;
  left:0;
  top:calc(100% + ((100cqh / 8) * .32));
  width:min(100%,var(--services-title-measure));
  max-width:var(--services-title-measure);
}

/* Existing branch primary placeholder shell becomes transparent/inert.
   The approved full-screen SERVICES editorial architecture sits above it. */
.special-projects-v099 .branch-area--primary[data-branch-area="services"]{
  background:transparent!important;
  pointer-events:none!important;
}

/* Preserve PROJECTS as the visible/interactive right third above editorial. */
.special-projects-v099 .projects-shared-third{
  position:relative!important;
  z-index:24!important;
}

/* CTA:
   actual DETALLES v093 CTA class/scale/style.
   Position follows the approved lower-left diagram and mirrors DETALLES'
   own horizontal/bottom padding logic. */
.special-projects-v099__cta{
  position:absolute!important;
  z-index:34;
  left:clamp(64px,5.2vw,88px);
  bottom:clamp(56px,6.1vh,70px);
  margin:0!important;
}

/* Ensure v093 master arrow works in this branch with the exact same glyph. */
.special-projects-v099 .detail-v093__cta::after{
  content:"↓"!important;
  width:var(--rugo-master-arrow-box);
  height:var(--rugo-master-arrow-box);
  display:inline-grid;
  place-items:center;
  flex:0 0 var(--rugo-master-arrow-box);
  color:currentColor;
  font-family:var(--launch-font)!important;
  font-size:var(--rugo-master-arrow-size)!important;
  font-weight:var(--rugo-master-arrow-weight)!important;
  line-height:var(--rugo-master-arrow-leading)!important;
  letter-spacing:0!important;
  transform:translateY(0) rotate(0deg)!important;
}

.special-projects-v099 .detail-v093__cta:hover::after,
.special-projects-v099 .detail-v093__cta:focus-visible::after{
  transform:translateY(6px) rotate(0deg)!important;
}

@media(max-width:1180px){
  .branch-panel--services.special-projects-v099{
    --services-left-axis:calc((100cqh / 8) * .30);
    --rugo-master-arrow-size:20px;
    --rugo-master-arrow-box:20px;
  }
}