/* RuGo v090 — DETALLES
   Approved public direction:
   - explain the offer rather than expose unfinished packages;
   - explain WHY RuGo works through configurations;
   - do NOT publish A–E as a five-option customer menu;
   - no prices / no validated cost ranking claims;
   - one stable real RuGo project image;
   - no gradient / no veil;
   - no floating Step 1 form;
   - CTA routes to the approved CONTACTO screen;
   - typography derives from approved SERVICIOS system.

   LOCAL / NOT PRODUCTION.
*/

.detail-screen-v090{
  --detail-paper:var(--launch-paper,#f4f1ea);
  --detail-ink:var(--launch-ink,#11110f);
  --detail-red:var(--launch-accent,var(--launch-red,#e1261c));
  --detail-muted:rgba(17,17,15,.60);
  --detail-line:rgba(17,17,15,.14);
  --detail-copy-width:56.5vw;

  position:relative;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
  padding:0!important;
  background:var(--detail-paper)!important;
  color:var(--detail-ink);
  font-family:var(--launch-font);
}

/* Kill inherited legacy visual effects on DETALLES. */
.detail-screen-v090::before,
.detail-screen-v090::after,
.detail-v090::before,
.detail-v090::after,
.detail-v090__visual::before,
.detail-v090__visual::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
  background-image:none!important;
}

.detail-v090{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:var(--detail-copy-width) minmax(0,1fr);
  background:var(--detail-paper);
}

/* ==========================================================
   LEFT / CONTENT
   ========================================================== */

.detail-v090__copy{
  position:relative;
  z-index:5;
  min-width:0;
  height:100%;
  container-type:size;
  display:flex;
  flex-direction:column;
  padding:
    clamp(92px,10.4vh,118px)
    clamp(34px,3.1vw,54px)
    clamp(56px,6.1vh,70px)
    clamp(64px,5.2vw,88px);
  background:var(--detail-paper);

  --detail-title-measure:clamp(360px,33.5vw,560px);
  --detail-title-scale:clamp(38px,calc((100cqh / 8) * .583),74px);
  --detail-title-leading:.90;
  --detail-statement-scale:clamp(13px,calc((100cqh / 8) * .175),18px);
}

.detail-v090__intro{
  display:block;
  flex:0 0 auto;
}

.detail-v090__title{
  display:block;
  width:min(100%,var(--detail-title-measure));
  max-width:var(--detail-title-measure);
  margin:0;
  color:var(--detail-ink);
  font-size:var(--detail-title-scale)!important;
  line-height:var(--detail-title-leading);
  font-weight:650;
  letter-spacing:-.055em;
  text-transform:uppercase;
}

.detail-v090__title-line{
  display:block;
  white-space:nowrap;
}

.detail-v090__statement{
  display:block;
  width:min(100%,var(--detail-title-measure));
  max-width:var(--detail-title-measure);
  margin:
    calc((100cqh / 8) * .08)
    0
    0
    .08em;
  color:var(--detail-muted);
  font-size:var(--detail-statement-scale);
  line-height:1.42;
  letter-spacing:-.012em;
  font-weight:400;
}

.detail-v090__statement strong{
  color:var(--detail-red);
  font-weight:650;
}

/* ==========================================================
   THREE OFFER PRINCIPLES
   ========================================================== */

.detail-v090__principles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:clamp(24px,2.7vh,32px);
  border-top:1px solid var(--detail-line);
  border-bottom:1px solid var(--detail-line);
}

.detail-v090__principle{
  min-width:0;
  padding:
    clamp(14px,1.55vh,18px)
    clamp(18px,1.55vw,26px)
    clamp(15px,1.65vh,20px)
    0;
}

.detail-v090__principle + .detail-v090__principle{
  padding-left:clamp(18px,1.55vw,26px);
  border-left:1px solid var(--detail-line);
}

.detail-v090__principle-title{
  display:block;
  margin:0 0 7px;
  color:var(--detail-red);
  font-size:clamp(10px,.73vw,12px);
  line-height:1;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.detail-v090__principle p{
  margin:0;
  color:var(--detail-muted);
  font-size:clamp(11px,.80vw,13px);
  line-height:1.43;
  letter-spacing:-.007em;
}

/* ==========================================================
   CONFIGURATION CONCEPT
   ========================================================== */

.detail-v090__configuration{
  display:grid;
  grid-template-columns:minmax(180px,.31fr) minmax(0,.69fr);
  gap:clamp(26px,2.2vw,40px);
  align-items:start;
  margin-top:clamp(24px,2.7vh,32px);
}

.detail-v090__configuration-label{
  display:block;
  margin:0;
  color:var(--detail-red);
  font-size:clamp(12px,.88vw,15px);
  line-height:1;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.detail-v090__configuration-headline{
  display:block;
  margin:
    clamp(9px,1.0vh,12px)
    0
    0;
  color:var(--detail-ink);
  font-size:clamp(20px,1.72vw,29px);
  line-height:.98;
  font-weight:650;
  letter-spacing:-.037em;
  text-transform:uppercase;
}

.detail-v090__configuration-copy{
  margin:0;
  max-width:600px;
  color:var(--detail-muted);
  font-size:clamp(11px,.82vw,14px);
  line-height:1.48;
  letter-spacing:-.008em;
}

.detail-v090__configuration-copy + .detail-v090__configuration-copy{
  margin-top:9px;
}

.detail-v090__config-flow{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:clamp(12px,1.0vw,18px);
  margin-top:clamp(14px,1.55vh,18px);
  padding:
    clamp(13px,1.45vh,17px)
    0;
  border-top:1px solid var(--detail-line);
  border-bottom:1px solid var(--detail-line);
}

.detail-v090__config-step{
  display:block;
  color:var(--detail-ink);
  font-size:clamp(10px,.76vw,13px);
  line-height:1.22;
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.detail-v090__config-arrow{
  color:var(--detail-red);
  font-size:clamp(16px,1.15vw,20px);
  line-height:1;
  font-weight:700;
}

/* ==========================================================
   HOW IT STARTS
   ========================================================== */

.detail-v090__start{
  display:grid;
  grid-template-columns:minmax(145px,.24fr) minmax(0,.76fr);
  gap:clamp(22px,2vw,34px);
  align-items:start;
  margin-top:clamp(22px,2.4vh,29px);
}

.detail-v090__start-label{
  display:block;
  margin:0;
  color:var(--detail-red);
  font-size:clamp(12px,.88vw,15px);
  line-height:1;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.detail-v090__start-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
}

.detail-v090__start-step{
  min-width:0;
  padding-right:clamp(18px,1.45vw,25px);
}

.detail-v090__start-step + .detail-v090__start-step{
  padding-left:clamp(18px,1.45vw,25px);
  border-left:1px solid var(--detail-line);
}

.detail-v090__start-number{
  display:block;
  margin:0 0 6px;
  color:var(--detail-red);
  font-size:9px;
  line-height:1;
  font-weight:750;
  letter-spacing:.08em;
}

.detail-v090__start-step strong{
  display:block;
  margin:0 0 6px;
  color:var(--detail-ink);
  font-size:clamp(11px,.82vw,14px);
  line-height:1;
  font-weight:750;
  letter-spacing:.035em;
  text-transform:uppercase;
}

.detail-v090__start-step p{
  margin:0;
  color:var(--detail-muted);
  font-size:clamp(10px,.72vw,12px);
  line-height:1.40;
}

/* ==========================================================
   CTA
   ========================================================== */

.detail-v090__action{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-top:auto;
  padding-top:clamp(20px,2.2vh,28px);
}

.detail-v090__cta{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--detail-red);
  font-family:var(--launch-font);
  font-size:clamp(19px,1.55vw,27px);
  line-height:1;
  font-weight:700;
  letter-spacing:-.025em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color 150ms ease;
}

.detail-v090__cta::after{
  content:"→";
  display:inline-block;
  font-size:1.03em;
  transform:translateX(0);
  transition:transform 150ms ease;
}

.detail-v090__cta:hover,
.detail-v090__cta:focus-visible{
  color:var(--detail-ink);
}

.detail-v090__cta:hover::after,
.detail-v090__cta:focus-visible::after{
  transform:translateX(7px);
}

.detail-v090__cta:focus-visible{
  outline:1px solid currentColor;
  outline-offset:7px;
}

/* ==========================================================
   RIGHT / STABLE REAL PROJECT IMAGE
   ========================================================== */

.detail-v090__visual{
  position:relative;
  min-width:0;
  height:100%;
  margin:0;
  overflow:hidden;
  background:var(--detail-paper);
}

.detail-v090__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  filter:none!important;
  opacity:1;
}

/* Current approved spatial navigation stays above the screen. */
.detail-screen-v090 > .edge-nav{
  z-index:45;
}

.detail-v090__contact{
  position:absolute;
  z-index:48;
  top:clamp(22px,2.6vh,34px);
  right:clamp(34px,3.4vw,58px);
  appearance:none;
  padding:0;
  border:0;
  background:transparent;
  color:var(--detail-red);
  font-family:var(--launch-font);
  font-size:clamp(24px,2.35vw,42px);
  line-height:.90;
  font-weight:650;
  letter-spacing:-.045em;
  text-transform:uppercase;
  cursor:pointer;
}

.detail-v090__contact:hover,
.detail-v090__contact:focus-visible{
  color:var(--detail-ink);
}

.detail-v090__contact:focus-visible{
  outline:1px solid currentColor;
  outline-offset:7px;
}

@media(max-width:1180px){
  .detail-screen-v090{
    --detail-copy-width:59vw;
  }

  .detail-v090__copy{
    padding-left:4.4vw;
    padding-right:2.6vw;
  }

  .detail-v090__configuration{
    grid-template-columns:minmax(160px,.31fr) minmax(0,.69fr);
  }

  .detail-v090__config-flow{
    gap:9px;
  }

  .detail-v090__start{
    grid-template-columns:minmax(125px,.23fr) minmax(0,.77fr);
  }
}