/* Composición proporcionada por el usuario, con naranja puro y ajustes de legibilidad. */
.mdm-reference{
      --accent:#ffffff;
      --bg:#FB923C;
      --text-main:#3b1b0b;
      --text-soft:#51260f;
      --text-muted:#51260f;
    }

    .mdm-reference *{box-sizing:border-box}

    .mdm-reference{
      margin:0;
      background:transparent;
      font-family:var(--font-sans);
      min-height:100%;
    }

    .mdm-reference{
      display:grid;
      place-items:start center;
      padding:0;
    }

    .mdm-reference .frame{
      width:100%;
      max-width:1794px;
      background:transparent;
    }

    .mdm-reference .panel-wrap{
      position:relative;
      width:100%;
      background:transparent;
    }

    .mdm-reference .panel{
      position:relative;
      width:100%;
      height:min(31.44vw, 564px); /* misma proporción visual de la referencia */
      min-height:360px;
      overflow:hidden;
      background:var(--bg);
      isolation:isolate;
    }

    .mdm-reference .content{
      position:absolute;
      inset:0;
    }

    .mdm-reference .title{
      position:absolute;
      left:10%;
      max-width:28.5%;
      top:40.2%;
      margin:0;
      color:var(--text-main);
      font-weight:430;
      letter-spacing:-.04em;
      line-height:.98;
      font-size:clamp(34px, 3.20vw, 66px);
      white-space:pre-line;
    }

    .mdm-reference .dot{
      position:absolute;
      border-radius:999px;
      background:var(--accent);
      box-shadow:0 0 18px rgba(251,146,60,.16);
    }

    .mdm-reference .dot.top{
      left:39.55%;
      top:20.2%;
      width:1.78%;
      aspect-ratio:1;
      opacity:.92;
    }

    .mdm-reference .dot.middle{
      left:41.25%;
      top:43.1%;
      width:2.95%;
      aspect-ratio:1;
      opacity:1;
    }

    .mdm-reference .dot.bottom{
      left:39.55%;
      top:71.0%;
      width:1.78%;
      aspect-ratio:1;
      opacity:.88;
    }

    .mdm-reference .divider{
      position:absolute;
      left:47.62%;
      top:40.65%;
      width:4px;
      height:14.25%;
      min-height:76px;
      background:var(--accent);
      border-radius:999px;
      opacity:.88;
    }

    .mdm-reference .feature{
      position:absolute;
      left:49.55%;
      width:40%;
    }

    .mdm-reference .feature h2,
    .mdm-reference .feature h3{
      margin:0;
      color:var(--text-main);
      font-weight:430;
      letter-spacing:-.03em;
      line-height:1.05;
      font-size:clamp(27px, 2.03vw, 42px);
    }

    .mdm-reference .feature p{
      margin:.55rem 0 0;
      color:var(--text-soft);
      font-weight:420;
      letter-spacing:-.018em;
      line-height:1.24;
      font-size:clamp(14px, 1.16vw, 24px);
      max-width:760px;
    }

    .mdm-reference .feature.top{top:13.1%}
    .mdm-reference .feature.middle{top:41.35%}
    .mdm-reference .feature.bottom{top:69.25%}

    .mdm-reference .particle{
      position:absolute;
      border-radius:50%;
      background:rgba(251,146,60,.10);
      filter:blur(.4px);
    }

    .mdm-reference .particle.top-left{left:36.75%; top:8.1%; width:8px; height:8px}
    .mdm-reference .particle.bottom-left{left:36.75%; top:84.85%; width:8px; height:8px}

    @media (max-width: 980px){
      .mdm-reference .panel{
        min-height:740px;
        height:auto;
      }

      .mdm-reference .title{
        left:8%;
        max-width:84%;
        top:9%;
        font-size:clamp(34px, 8vw, 56px);
      }

      .mdm-reference .dot.top{left:8.5%; top:26%; width:24px}
      .mdm-reference .dot.middle{left:8.2%; top:44%; width:36px}
      .mdm-reference .dot.bottom{left:8.5%; top:68%; width:24px}

      .mdm-reference .divider{
        left:15.5%;
        top:42.4%;
        height:12%;
        width:3px;
      }

      .mdm-reference .feature{
        left:21%;
        width:70%;
      }

      .mdm-reference .feature.top{top:22%}
      .mdm-reference .feature.middle{top:40%}
      .mdm-reference .feature.bottom{top:63%}
    }

    @media (min-width:621px) and (max-width:980px){
      .mdm-reference .title{top:5%}
    }

    @media (max-width:620px){
      /* Mantiene espacio entre el círculo, el divisor y el texto en móvil. */
      .mdm-reference .dot.middle{width:28px}
      .mdm-reference .divider{left:calc(8.2% + 40px)}
      .mdm-reference .feature{
        left:calc(8.2% + 56px);
        width:calc(83.8% - 56px);
      }
    }

/* Une los cuatro paneles sin cambiar su distribución interior ni los
   espacios antes del encabezado y después del último servicio. */
.feature-section--connected:not(#mdm){padding-top:0}
.feature-section--connected:not(#desarrollo){padding-bottom:0}

/* Los bloques adicionales conservan el título y el enlace de cada servicio. */
.mdm-reference .panel-heading{
  position:absolute;
  left:10%;
  width:28.5%;
  top:50%;
  transform:translateY(-50%);
}
.mdm-reference .panel-heading .title{
  position:static;
  max-width:none;
  font-size:clamp(28px, 2.8vw, 50px);
  line-height:1.08;
  white-space:normal;
}
.mdm-reference .panel-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  max-width:100%;
  margin-top:24px;
  padding:8px 0;
  color:var(--text-main);
  font-size:clamp(14px, 1.16vw, 20px);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}
.mdm-reference .panel-link:focus-visible{
  outline:2px solid var(--text-main);
  outline-offset:6px;
}

/* El sentido cambia sin mover ni deformar la composición. */
.mdm-reference{
  --reveal-from:inset(0 100% 0 0);
  --reveal-stripe:inset(0 98.8% 0 0);
  --title-offset:-28px;
}
.mdm-reference[data-reveal-direction="right"]{
  --reveal-from:inset(0 0 0 100%);
  --reveal-stripe:inset(0 0 0 98.8%);
  --title-offset:28px;
}
.mdm-reference[data-reference-state="pending"] .panel{
  clip-path:var(--reveal-from);
}
.mdm-reference:is([data-reference-state="pending"], [data-reference-state="entering"]) :is(.title, .panel-link){
  opacity:0;
  transform:translateX(var(--title-offset));
}
.mdm-reference:is([data-reference-state="pending"], [data-reference-state="entering"]) .feature{
  opacity:0;
  transform:translateY(18px);
  filter:blur(6px);
}
.mdm-reference[data-reference-state="entering"] .panel{
  animation:revealPanel 1.06s cubic-bezier(.16,1,.3,1) .08s both;
}
.mdm-reference[data-reference-state="entering"] :is(.title, .panel-link){
  animation:referenceTitleIn .78s cubic-bezier(.16,1,.3,1) .28s both;
}
.mdm-reference[data-reference-state="entering"] .feature{
  animation:referenceFeatureIn .76s cubic-bezier(.22,1,.36,1) .38s both;
}
.mdm-reference[data-reference-state="entering"] .feature.middle{animation-delay:.47s}
.mdm-reference[data-reference-state="entering"] .feature.bottom{animation-delay:.56s}

@keyframes revealPanel{
  0%{clip-path:var(--reveal-from)}
  12%{clip-path:var(--reveal-stripe)}
  100%{clip-path:inset(0 0 0 0)}
}
@keyframes referenceTitleIn{
  from{opacity:0;transform:translateX(var(--title-offset))}
  to{opacity:1;transform:translateX(0)}
}
@keyframes referenceFeatureIn{
  from{opacity:0;transform:translateY(18px);filter:blur(6px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* El texto más extenso fluye en móvil: no se recorta ni se superpone. */
@media (max-width:980px){
  .mdm-reference--details .content{
    position:relative;
    display:grid;
    grid-template-columns:56px minmax(0,1fr);
    gap:44px 0;
    padding:48px 8% 64px;
  }
  .mdm-reference--details .panel-heading{
    position:static;
    grid-column:1 / -1;
    width:auto;
    transform:none;
  }
  .mdm-reference--details .panel-heading .title{
    font-size:clamp(32px, 5.5vw, 48px);
  }
  .mdm-reference.mdm-reference--details .feature{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    grid-column:2;
  }
  .mdm-reference--details .feature.top{grid-row:2}
  .mdm-reference--details .feature.middle{grid-row:3}
  .mdm-reference--details .feature.bottom{grid-row:4}
  .mdm-reference.mdm-reference--details .dot{
    position:relative;
    left:auto;
    top:auto;
    grid-column:1;
    align-self:center;
  }
  .mdm-reference--details .dot.top{grid-row:2}
  .mdm-reference--details .dot.middle{grid-row:3;width:28px}
  .mdm-reference--details .dot.bottom{grid-row:4}
  .mdm-reference--details .divider{
    position:relative;
    grid-column:1;
    grid-row:3;
    align-self:center;
    justify-self:end;
    left:auto;
    top:auto;
    margin-right:12px;
    height:76px;
  }
}

@media (max-width:620px){
  .mdm-reference:not(.mdm-reference--details) .panel{min-height:640px}
  .mdm-reference:not(.mdm-reference--details) .title{top:7%;font-size:clamp(32px,9vw,40px)}
  .mdm-reference:not(.mdm-reference--details) .dot.top{top:25%}
  .mdm-reference:not(.mdm-reference--details) .dot.middle{top:48%}
  .mdm-reference:not(.mdm-reference--details) .dot.bottom{top:72%}
  .mdm-reference:not(.mdm-reference--details) .divider{top:46%;height:11%}
  .mdm-reference:not(.mdm-reference--details) .feature.top{top:21%}
  .mdm-reference:not(.mdm-reference--details) .feature.middle{top:43%}
  .mdm-reference:not(.mdm-reference--details) .feature.bottom{top:67%}

  .mdm-reference--details .panel{min-height:0}
  .mdm-reference--details .content{
    grid-template-columns:48px minmax(0,1fr);
    gap:30px 0;
    padding:36px 7% 44px;
  }
  .mdm-reference--details .panel-heading .title{font-size:clamp(29px,8vw,36px)}
  .mdm-reference--details .panel-link{margin-top:16px}
  .mdm-reference.mdm-reference--details .feature{font-size:inherit}
  .mdm-reference.mdm-reference--details .feature h3{font-size:clamp(23px,6.8vw,29px)}
  .mdm-reference.mdm-reference--details .feature p{font-size:14px;line-height:1.32}
}

/* Sin JavaScript, todo queda visible; con movimiento reducido no hay animación. */
@media (prefers-reduced-motion:reduce){
  .mdm-reference[data-reference-state] .panel{clip-path:none;animation:none}
  .mdm-reference[data-reference-state] :is(.title,.panel-link,.feature){
    opacity:1;
    transform:none;
    filter:none;
    animation:none;
  }
}