
@font-face{
  font-family:'BwModelica';
  src:url('/assets/fonts/BwModelica/400-BwModelica-Regular.woff2?v=3') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'BwModelica';
  src:url('/assets/fonts/BwModelica/700-BwModelica-Bold.woff2?v=3') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
.mlab *{box-sizing:border-box;}

.mlab-wrap{
  --k:.52;
  --mh:700px;
  --kmax:1;
  --shift:0px;
  --lift:0px;
  position:relative; margin-top:72px; z-index:8;

  height:calc(var(--mh) * var(--kmax));
}
.mlab{
  position:absolute; top:0; right:0; width:1200px; z-index:1;
  transform-origin:top right;

  transform:translate(var(--shift), var(--lift)) scale(var(--k));
  color:#22232c; font-family:'BwModelica', system-ui, sans-serif; font-weight:400;
  font-feature-settings:'salt' on; text-align:left;
}
@media (max-width:900px){
  .mlab-wrap{ --k:1 !important; height:auto; }
  .mlab{ position:static; width:100%; transform:none; }
}
.mlab svg{stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.mlab .slider{position:relative; width:100%; margin:0; padding:0;}

.mlab .slide{position:absolute; left:0; right:0; top:0;
  background:transparent;
  display:grid; grid-template-columns:minmax(400px, .56fr) 1.44fr; align-items:center; gap:34px;

  padding:104px 70px 100px 56px;
  perspective:2200px;
  opacity:0; visibility:hidden; pointer-events:none;
  cursor:pointer;}
.mlab .slide.is-on{position:relative; left:auto; right:auto; top:auto; opacity:1; visibility:visible; pointer-events:auto;}
.mlab .slide::before{
  content:''; position:absolute; z-index:-1; background:var(--accent);

  top:calc(-1 * var(--bt, 0px));
  right:calc(-1 * var(--br, 0px));
  bottom:calc(-1 * var(--bb, 0px));
  left:calc(-1 * var(--bl, 0px));

  border-radius:calc(26px * (1 - var(--flat, 0)));
}
.mlab .intro{color:#fff;}
.mlab .intro__name{margin:0; font-size:2.5rem; font-weight:600; letter-spacing:-.02em; line-height:1.1;}
.mlab .intro__phrase{margin:14px 0 0; font-size:1.02rem; line-height:1.55; color:rgba(255,255,255,.82); text-wrap:balance;}

.mlab .ticks{display:flex; gap:10px; margin:0;
  position:absolute; left:56px; right:70px; bottom:34px; z-index:3;}
.mlab .tick{flex:1; height:22px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center;}
.mlab .tick::before{content:''; display:block; width:100%; height:3px; border-radius:99px;
  background:var(--ink, #22232c); opacity:.28; position:absolute;}
.mlab .tick{position:relative;}
.mlab .tick i{position:relative; display:block; height:3px; width:0;
  background:var(--ink, #22232c); border-radius:99px; transition:height .25s;}
.mlab .tick:hover::before, .mlab .tick:hover i{height:5px;}
.mlab .app{width:100%; aspect-ratio:4/3;
  border-radius:14px; overflow:hidden; display:flex;
  background:#fbfbfd; font-size:11.5px; color:#22232c;
  box-shadow:0 40px 70px -34px rgba(20,20,40,.5);
  transform:rotateY(-12deg) rotateX(6deg) scale(.96);
  transform-origin:left center;
  transform-style:preserve-3d;}
.mlab .app--serp, .mlab .app--plan{flex-direction:column;}
.mlab .m-nav{width:138px; flex:none; padding:16px 12px; display:flex; flex-direction:column; gap:2px;
  background:#f2f3f7; color:#5d6070;}
.mlab .m-nav__logo{display:block; margin-bottom:18px; padding:0 3px;}
.mlab .m-nav__logo img{width:100%; max-width:104px; height:auto; display:block;}
.mlab .m-nav__i{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:8px; color:#7d8091;}
.mlab .m-nav__i svg{width:14px; height:14px; flex:none;}
.mlab .m-nav__i em{font-style:normal; font-size:0.8333em;}
.mlab .m-nav__i.is-on{background:#fff; color:var(--accent);}
.mlab .m-nav__foot{margin-top:auto; padding:10px; border-radius:9px; background:#fff;}
.mlab .m-nav__foot b{display:block; font-size:0.7917em; font-weight:600;}
.mlab .m-nav__foot small{display:block; margin-top:3px; font-size:0.7083em; color:#9598a8; line-height:1.35;}
.mlab .body{flex:1; display:flex; flex-direction:column; min-width:0;}
.mlab .bar{display:flex; align-items:center; gap:10px; padding:12px 16px; background:#fff;}
.mlab .crumb{font-size:0.9167em; font-weight:600;}
.mlab .crumb b{color:#c2c4d0; font-weight:400; margin:0 3px;}
.mlab .search{flex:1; display:flex; align-items:center; gap:7px; height:28px; padding:0 11px;
  border-radius:8px; background:#f2f3f7; color:#9598a8; font-size:0.8333em;}
.mlab .search svg{width:12px; height:12px;}
.mlab .m-btn{padding:7px 12px; border-radius:8px; background:var(--accent); color:#fff; font-size:0.8333em; font-weight:600;}
.mlab .av{width:27px; height:27px; border-radius:50%; flex:none; display:block;}
.mlab .split{display:flex; gap:14px; padding:12px 14px; flex:1;}
.mlab .doc{position:relative; flex:1.3; background:#fff; border-radius:11px; padding:15px 16px; overflow:hidden;}
.mlab .doc__scan{position:absolute; left:0; right:0; top:0; height:60px; pointer-events:none;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 14%, transparent), transparent);}
.mlab .doc__head{display:flex; align-items:center; gap:10px; padding-bottom:11px;}
.mlab .doc__logo{width:26px; height:26px; border-radius:7px; background:#e4e6ee; flex:none;}
.mlab .doc__ttl b{display:block; font-size:0.9583em; font-weight:600;}
.mlab .doc__ttl small{font-size:0.75em; color:#9598a8;}
.mlab .stamp{margin-left:auto; font-size:0.75em; color:#1f8a5f; background:#e7f5ee; padding:5px 9px; border-radius:6px;}
.mlab .doc__lines{display:flex; flex-direction:column; gap:5px; margin:4px 0 12px;}
.mlab .doc__lines i{display:block; height:5px; border-radius:3px; background:#f0f1f6;}
.mlab .doc__tbl{width:100%; border-collapse:collapse; font-size:0.7917em;}
.mlab .doc__tbl th{text-align:left; font-size:0.7083em; color:#9598a8; font-weight:400; padding:6px 5px;}
.mlab .doc__tbl td{padding:5.5px 5px; color:#4b4e5d;}
.mlab .doc__tbl tr:not(:last-child) td{box-shadow:inset 0 -1px 0 #f4f5f9;}
.mlab .doc__tbl td:last-child, .mlab .doc__tbl th:last-child{text-align:right;}
.mlab .doc__tbl td:last-child{font-weight:600; color:#22232c;}
.mlab .doc__tbl tr.is-flag td{background:#fdf4e3;}
.mlab .doc__tbl tr.is-flag td:first-child{border-radius:6px 0 0 6px;}
.mlab .doc__tbl tr.is-flag td:last-child{border-radius:0 6px 6px 0;}
.mlab .doc__foot{display:flex; justify-content:space-between; align-items:baseline; margin-top:11px;}
.mlab .doc__foot span{font-size:0.8333em; color:#9598a8;}
.mlab .doc__foot b{font-size:1.25em; font-weight:600;}
.mlab .fields{flex:1; display:flex; flex-direction:column; gap:6px; min-width:0;}
.mlab .side__head{display:flex; align-items:center; justify-content:space-between;}
.mlab .side__head b{font-size:0.7917em; font-weight:600; color:#5d6070;}
.mlab .side__head--sep{margin-top:9px;}
.mlab .m-tag{font-size:0.7083em; padding:3px 8px; border-radius:999px; background:#f0f1f6; color:#8b8e9e;}
.mlab .m-tag--live{background:color-mix(in srgb, var(--accent) 11%, #fff); color:var(--accent);}
.mlab .m-field{display:flex; align-items:center; gap:9px; background:#fff; border-radius:9px; padding:8px 11px;}
.mlab .m-field span{font-size:0.75em; color:#9598a8; width:56px; flex:none;}
.mlab .m-field b{flex:1; font-size:0.8333em; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mlab .m-field em{font-style:normal; font-size:0.75em; color:#1f8a5f; background:#e7f5ee; padding:3px 7px; border-radius:6px;}
.mlab .m-field.is-warn em{color:#a2711a; background:#fdf4e3;}
.mlab .m-field.is-warn b{color:#a2711a;}
.mlab .conf{display:flex; align-items:center; gap:12px; background:#fff; border-radius:11px; padding:10px; margin-top:2px;}
.mlab .conf__txt b{display:block; font-size:0.8333em; font-weight:600;}
.mlab .conf__txt small{display:block; font-size:0.7083em; color:#9598a8; margin:2px 0 7px;}
.mlab .cta{display:inline-block; background:var(--accent); color:#fff; font-size:0.7917em; font-weight:600; padding:6px 11px; border-radius:7px;}
.mlab .ring{position:relative; width:58px; flex:none;}
.mlab .ring--lg{width:66px;}
.mlab .ring svg{width:100%; height:auto; transform:rotate(-90deg);}
.mlab .ring__t{stroke:#eef0f5; stroke-width:7;}
.mlab .ring__f{stroke:var(--accent); stroke-width:7; stroke-linecap:round; stroke-dasharray:201; stroke-dashoffset:201;}
.mlab .ring__n{position:absolute; inset:0; display:grid; place-items:center;}
.mlab .ring__n b{font-size:1.0417em; font-weight:600;}
.mlab .act{display:flex; align-items:center; gap:8px; background:#fff; border-radius:8px; padding:8px 11px;}
.mlab .act .dot{width:7px; height:7px; border-radius:50%; background:#3aa87a; flex:none;}
.mlab .act span{flex:1; font-size:0.7917em; color:#4b4e5d;}
.mlab .act em{font-style:normal; font-size:0.7083em; color:#a4a7b5;}
.mlab .strip{display:flex; gap:11px; padding:0 14px 13px;}
.mlab .s{flex:1; background:#fff; border-radius:11px; padding:9px 12px;}
.mlab .s small{display:block; font-size:0.7083em; color:#9598a8;}
.mlab .s b{display:block; margin:5px 0 8px; font-size:1.4167em; font-weight:600;}
.mlab .s b em{font-style:normal; font-size:0.75em; color:#9598a8;}
.mlab .spark{display:flex; align-items:flex-end; gap:3px; height:16px;}
.mlab .spark i{flex:1; border-radius:2px; background:color-mix(in srgb, var(--accent) 35%, #fff); transform-origin:bottom;}
.mlab .spark--down i{background:#e0e2ea;}
.mlab .spark--down i:last-child{background:#9fd8bf;}
.mlab .prog{height:6px; border-radius:99px; background:#eef0f5; overflow:hidden;}
.mlab .prog span{display:block; height:100%; width:0; border-radius:99px; background:var(--accent);}
.mlab .prog--wide{flex:1;}
.mlab .chrome{display:flex; align-items:center; gap:12px; padding:12px 16px; background:#f2f3f7;}
.mlab .url{display:flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; background:#fff; font-size:0.8333em; color:#7d8091;}
.mlab .url svg{width:11px; height:11px;}
.mlab .chrome__tabs{margin-left:auto; display:flex; gap:4px;}
.mlab .chrome__tabs em{font-style:normal; font-size:0.7917em; color:#8b8e9e; padding:6px 11px; border-radius:8px;}
.mlab .chrome__tabs em.is-on{background:#fff; color:#22232c;}
.mlab .serp{display:flex; gap:16px; padding:18px; background:#fff; flex:1;}
.mlab .serp__main{flex:1.55; display:flex; flex-direction:column; gap:14px; min-width:0;}
.mlab .ask{display:flex; align-items:center; gap:10px; font-size:1.0em; font-weight:600;}
.mlab .ask__av{width:25px; height:25px; border-radius:50%; flex:none; display:block;}
.mlab .answer{display:flex; gap:10px;}
.mlab .answer__av{width:24px; height:24px; border-radius:8px; flex:none; display:grid; place-items:center; background:#e7f2ee; color:#1f8a5f; font-size:0.7083em; font-weight:600;}
.mlab .answer__body{flex:1; min-width:0;}
.mlab .answer__body p{margin:0; font-size:0.875em; line-height:1.7; color:#4b4e5d; min-height:54px;}
.mlab .answer__body p b{font-weight:600; color:#22232c; background:color-mix(in srgb, var(--accent) 32%, transparent); padding:1px 4px; border-radius:4px;}
.mlab .answer__body sup{font-size:0.625em; color:var(--accent);}
.mlab .cites{display:flex; gap:7px; margin-top:11px; flex-wrap:wrap;}
.mlab .cite{display:flex; align-items:center; gap:6px; font-size:0.75em; color:#7d8091; background:#f5f6fa; padding:5px 9px; border-radius:7px;}
.mlab .cite i{width:9px; height:9px; border-radius:3px; background:var(--c, var(--accent));}
.mlab .cite img{width:13px; height:13px; border-radius:3px; display:block;}
.mlab .k--brand{display:flex; align-items:center; gap:11px;}
.mlab .k__logo{width:38px; height:38px; flex:none; display:block;}
.mlab .note{display:inline-block; margin-top:10px; font-size:0.75em; color:var(--accent); background:color-mix(in srgb, var(--accent) 11%, #fff); padding:5px 10px; border-radius:999px;}
.mlab .kpis{display:flex; gap:12px; margin-top:auto;}
.mlab .k{flex:1; background:#f7f8fb; border-radius:11px; padding:12px 13px;}
.mlab .k small{display:block; font-size:0.7083em; color:#9598a8;}
.mlab .k b{display:block; margin:5px 0 3px; font-size:1.6667em; font-weight:600; color:var(--accent);}
.mlab .k em{font-style:normal; font-size:0.7083em; color:#9598a8;}
.mlab .bookbar{display:flex; align-items:center; gap:16px; background:#f7f8fb; border-radius:11px; padding:12px 14px;}
.mlab .bookbar b{font-size:0.7917em; font-weight:600; color:#5d6070;}
.mlab .cal{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; flex:1; max-width:230px;}
.mlab .cal span{font-size:0.625em; color:#a4a7b5; text-align:center;}
.mlab .cal i{height:13px; border-radius:4px; background:#e6e8ef;}
.mlab .cal i.on{background:color-mix(in srgb, var(--accent) 38%, #fff);}
.mlab .cal i.on--hi{background:var(--accent);}
.mlab .serp__side{flex:1; display:flex; flex-direction:column; gap:5px; min-width:0;}
.mlab .rrow{display:flex; align-items:center; gap:9px; padding:7px 0;}
.mlab .rrow span{flex:1; font-size:0.7917em; color:#5d6070; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mlab .rrow b{font-size:0.9167em; font-weight:600; width:12px; text-align:right;}
.mlab .rrow em{font-style:normal; font-size:0.7083em; width:20px; text-align:right;}
.mlab .rrow .up{color:#3aa87a;}
.mlab .rrow .eq{color:#b0b3c0;}
.mlab .line{width:100%; height:58px; display:block; overflow:visible; margin-top:4px;}
.mlab .line__area{fill:color-mix(in srgb, var(--accent) 16%, transparent); stroke:none;}
.mlab .line__path{stroke:var(--accent); stroke-width:2.2;}
.mlab .line__dot{fill:#fff; stroke:var(--accent); stroke-width:2.4;}
.mlab .legend{display:flex; gap:12px; margin-top:6px;}
.mlab .legend span{display:flex; align-items:center; gap:5px; font-size:0.7083em; color:#8b8e9e;}
.mlab .legend i{width:7px; height:7px; border-radius:50%; background:var(--c, var(--accent));}
.mlab .bar--plan{gap:14px;}
.mlab .brandmark{width:62px; height:auto; display:block;}
.mlab .tabs{display:flex; gap:3px;}
.mlab .tabs em{font-style:normal; font-size:0.8333em; color:#8b8e9e; padding:6px 11px; border-radius:8px;}
.mlab .tabs em.is-on{background:color-mix(in srgb, var(--accent) 10%, #fff); color:var(--accent);}
.mlab .month{margin-left:auto; font-size:0.8333em; color:#5d6070; background:#f2f3f7; padding:6px 12px; border-radius:8px;}
.mlab .avs{display:flex; align-items:center;}
.mlab .avs img{width:22px; height:22px; border-radius:50%; margin-left:-6px; box-shadow:0 0 0 2px #fff; display:block;}
.mlab .avs em{font-style:normal; font-size:0.75em; color:#9598a8; margin-left:7px;}
.mlab .plan{display:flex; gap:16px; padding:14px 16px 16px; background:#fff; flex:1;}
.mlab .plan__grid{flex:2.1; display:flex; flex-direction:column; min-width:0;}
.mlab .gh{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; margin-bottom:7px;}
.mlab .gh span{font-size:0.7083em; color:#a4a7b5;}
.mlab .cells{display:grid; grid-template-columns:repeat(7,1fr); gap:7px; flex:1;}
.mlab .cel{background:#f7f8fb; border-radius:9px; padding:7px; display:flex; flex-direction:column;}
.mlab .cel.is-empty{background:#fafbfd;}
.mlab .cel b{display:block; font-size:0.7083em; font-weight:600; line-height:1.3; margin-top:6px;}
.mlab .cel em{font-style:normal; display:inline-block; margin-top:auto; font-size:0.625em; color:var(--accent);}
.mlab .cel.is-hi{background:color-mix(in srgb, var(--accent) 10%, #fff);}
.mlab .th{display:block; height:26px; border-radius:6px;}
.mlab .th--1{background:#f4a6c0;}
.mlab .th--2{background:#f3c48f;}
.mlab .th--3{background:#a5d8c6;}
.mlab .th--4{background:#bdb4ee;}
.mlab .th--5{background:#f2a8c4;}
.mlab .th--6{background:#ddc3a6;}
.mlab .th--7{background:var(--accent);}
.mlab .th--8{background:#a9c9ec;}
.mlab .planfoot{display:flex; align-items:center; gap:14px; margin-top:12px;}
.mlab .planfoot b{font-size:1.0em; font-weight:600; white-space:nowrap;}
.mlab .planfoot small{font-size:0.7083em; color:#9598a8; white-space:nowrap;}
.mlab .plan__side{flex:1; display:flex; flex-direction:column; gap:5px; max-width:220px;}
.mlab .force{display:flex; align-items:center; gap:8px; font-size:0.8333em; color:#4b4e5d; padding:4px 0;}
.mlab .force i{width:14px; height:14px; border-radius:5px; background:var(--accent); position:relative; flex:none;}
.mlab .force i::after{content:''; position:absolute; inset:0; background:no-repeat center/9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E");}
.mlab .force.is-off{color:#a4a7b5;}
.mlab .force.is-off i{background:#e0e2ea;}
.mlab .goal{display:flex; align-items:center; gap:12px; background:#f7f8fb; border-radius:11px; padding:11px 12px;}
.mlab .goal__txt b{display:block; font-size:0.9167em; font-weight:600;}
.mlab .goal__txt small{display:block; font-size:0.7083em; color:#9598a8; margin-top:2px;}
.mlab .m-quote{background:#f7f8fb; border-radius:11px; padding:11px 12px;}
.mlab .m-quote small{display:block; font-size:0.7083em; color:#9598a8;}
.mlab .m-quote p{margin:6px 0 0; font-size:0.7917em; line-height:1.55; color:#4b4e5d;}
.mlab .m-quote p b{font-weight:600; color:var(--accent);}
.mlab .route{display:flex; align-items:center; gap:5px;}
.mlab .route em{font-style:normal; font-size:0.7083em; color:#a4a7b5; background:#f2f3f7; padding:5px 8px; border-radius:6px;}
.mlab .route em.on{color:#fff; background:var(--accent);}
.mlab .route span{flex:1; height:2px; border-radius:2px; background:#e6e8ef;}
@media (max-width:900px){
  .mlab .slider{width:calc(100% - 28px); margin:14px auto;}
  .mlab .slide{grid-template-columns:1fr; gap:26px; padding:28px 24px; border-radius:20px;}
  .mlab .app{aspect-ratio:auto; font-size:10px;}
}
@media (max-width:680px){
  .mlab .m-nav{width:48px;}
  .mlab .m-nav__i em, .mlab .m-nav__logo, .mlab .m-nav__foot{display:none;}
  .mlab .split, .mlab .serp, .mlab .plan{flex-direction:column;}
  .mlab .plan__side{max-width:none;}
  .mlab .strip, .mlab .kpis{flex-wrap:wrap;}
  .mlab .s, .mlab .k{min-width:calc(50% - 6px);}
}


.mlab .intro__cta{

  display:inline-flex; align-items:center; gap:10px; margin-top:22px;
  padding:14px 16px 14px 22px; border-radius:999px;
  background:var(--ink, #fff); color:var(--accent); text-decoration:none;
  font-weight:600; font-size:14px; line-height:1;
  transition:opacity .25s, transform .25s;
}
.mlab .intro__cta svg{ width:20px; height:20px; flex-shrink:0; }
.mlab .intro__cta:hover{ opacity:.86; transform:translateY(-1px); }


.mlab .slide-nav{
  position:absolute; top:50%; z-index:4; margin-top:-22px;
  width:44px; height:44px; padding:0; border:0; border-radius:99px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:transparent; color:var(--ink, #fff); opacity:.5;
  transition:opacity .25s, background-color .25s;
}
.mlab .slide-nav:hover{ opacity:1; background:rgba(127,127,127,.18); }
.mlab .slide-nav svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; }

.mlab .slide-nav--prev{ left:calc(20px - var(--bl, 0px)); }
.mlab .slide-nav--next{ right:calc(20px - var(--br, 0px)); }


.mlab .slider{ cursor:grab; }
.mlab .slider.is-dragging{ cursor:grabbing; }
.mlab .slider.is-dragging *{ cursor:grabbing; }


@media (max-width:900px){
  .mlab .app-fit{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; }
  .mlab .app-fit .app{
    position:absolute; top:0; left:0;
    width:var(--aw, 620px); height:calc(var(--aw, 620px) * 3 / 4);
    transform:scale(var(--ak, 1)) !important;
    transform-origin:top left;
    aspect-ratio:auto; font-size:11.5px;
  }


  .mlab .ticks{ left:24px; right:24px; bottom:20px; gap:8px; }
  .mlab .tick{ height:44px; }


  .mlab .slide-nav{ display:none; }


  .mlab .intro__name{ font-size:1.75rem; }
  .mlab .intro__phrase{ font-size:.95rem; }
  .mlab .intro__cta{ margin-top:18px; }
}


/* Cabecera estrecha, con la composicion de microservicios */
body[data-page="casos-de-exito"] .casos-hero{ min-height:0;
  padding-top:clamp(147px,13vh,181px); padding-bottom:clamp(69px,4.4vh,89px); }
body[data-page="casos-de-exito"] .casos-hero .section__inner{ position:relative; z-index:1; }
body[data-page="casos-de-exito"] .casos-hero .section__inner{ display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(12px,1.4vw,26px); align-items:end; }
body[data-page="casos-de-exito"] .casos-hero__cabeza{ display:flex; flex-direction:column; }
body[data-page="casos-de-exito"] .casos-hero .eyebrow{ margin:0 0 15px; opacity:1; }
body[data-page="casos-de-exito"] .casos-hero__titulo{ margin:0; font-size:clamp(2rem,4.2vw,3.6rem);
  font-weight:800; line-height:1.03; letter-spacing:-.035em; }
body[data-page="casos-de-exito"] .casos-hero__titulo span{ display:block; }
body[data-page="casos-de-exito"] .casos-hero .lead{ margin:0; max-width:none; text-align:right;
  padding-bottom:.32em; }

/* Bloquetech y Vinica, sin aire entre ellos */
body[data-page="casos-de-exito"] #casos{ padding-top:0; padding-bottom:0;
  min-height:108vh; align-items:flex-start; }
body[data-page="casos-de-exito"] #casos .mlab-wrap{ margin-top:30px; }
body[data-page="casos-de-exito"] .nav{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(0,0,0,.1); }

/* Cierre centrado, como el de microservicios */
body[data-page="casos-de-exito"] .casos-cierre{ min-height:0;
  padding-top:clamp(70px,10vh,130px); padding-bottom:clamp(80px,11vh,150px); }
body[data-page="casos-de-exito"] .casos-cierre .section__inner{ text-align:center; }
body[data-page="casos-de-exito"] .casos-cierre .lead{ margin-inline:auto; }
.casos-cierre__vias{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.casos-cierre__iconos{ display:flex; align-items:center; gap:14px; }
.casos-cierre__iconos a{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%;
  border:1px solid var(--border-strong); color:inherit;
  transition:background-color .18s var(--ease-out), color .18s var(--ease-out),
             border-color .18s var(--ease-out), transform .18s var(--ease-out); }
.casos-cierre__iconos a:hover{ background:var(--fg); color:var(--bg); border-color:var(--fg);
  transform:translateY(-2px); }
.casos-cierre__iconos svg{ width:22px; height:22px; display:block; }

@media (max-width:900px){
  body[data-page="casos-de-exito"] .casos-hero .section__inner{ grid-template-columns:1fr; }
  body[data-page="casos-de-exito"] .casos-hero .lead{ text-align:left; padding-bottom:0; }
}


/* Tira de cifras en la cabecera de diseno web */
body[data-page="diseno-web"] .tira{ position:relative; isolation:isolate; display:grid;
  grid-template-columns:repeat(3,1fr); gap:0; margin-top:34px; max-width:560px; border:0;
  border-radius:14px; background:rgba(255,255,255,.45);
  -webkit-backdrop-filter:blur(14px) saturate(1.06); backdrop-filter:blur(14px) saturate(1.06);
  box-shadow:0 16px 32px -30px rgba(0,0,0,.5); }
body[data-page="diseno-web"] .tira::before,
body[data-page="diseno-web"] .tira::after{ content:''; position:absolute; z-index:-1;
  border-radius:50%; filter:blur(64px); pointer-events:none; }
body[data-page="diseno-web"] .tira::before{ width:52%; aspect-ratio:1; left:-2%; top:-34%;
  background:#b3b3ba; opacity:.28; }
body[data-page="diseno-web"] .tira::after{ width:56%; aspect-ratio:1; right:-2%; bottom:-36%;
  background:#17171b; opacity:.1; }
body[data-page="diseno-web"] .tira__celda{ position:relative; overflow:hidden; display:flex;
  min-height:150px; padding:16px 14px; color:#111; border:0; background:transparent;
  transition:background-color .38s var(--ease-out), color .38s var(--ease-out); }
body[data-page="diseno-web"] .tira__celda + .tira__celda{ box-shadow:inset 1px 0 0 rgba(0,0,0,.05); }
body[data-page="diseno-web"] .tira__celda:first-child{ border-radius:14px 0 0 14px; }
body[data-page="diseno-web"] .tira__celda:last-child{ border-radius:0 14px 14px 0; }
body[data-page="diseno-web"] .tira__celda[data-tono="amarillo"]{ --vtinte:rgba(255,203,31,.82); --vink:#111; }
body[data-page="diseno-web"] .tira__celda[data-tono="rojo"]{ --vtinte:rgba(193,18,31,.8); --vink:#ffffff; }
body[data-page="diseno-web"] .tira__celda[data-tono="negro"]{ --vtinte:rgba(12,12,12,.74); --vink:#ffffff; }
body[data-page="diseno-web"] .tira__celda:hover,
body[data-page="diseno-web"] .tira__celda:focus-within{ background-color:var(--vtinte); color:var(--vink); }
body[data-page="diseno-web"] .tira .flotador{ position:absolute; z-index:0; right:-8%; bottom:-16%;
  width:46%; pointer-events:none; }
body[data-page="diseno-web"] .tira__celda:nth-child(2) .flotador{ right:0; bottom:2%; width:40%; }
body[data-page="diseno-web"] .tira__objeto{ display:block; width:100%; height:auto; opacity:0;
  transform:translateY(12px) scale(.94); filter:drop-shadow(0 12px 16px rgba(0,0,0,.3));
  transition:opacity .34s var(--ease-out), transform .42s var(--ease-out); }
body[data-page="diseno-web"] .tira__celda:hover .tira__objeto{ opacity:1; transform:none; }
body[data-page="diseno-web"] .tira__celda{ align-items:stretch; }
body[data-page="diseno-web"] .tira .bloque{ position:relative; z-index:1; display:flex;
  flex-direction:column; align-items:flex-start; max-width:78%; flex:1; }
body[data-page="diseno-web"] .tira .bloque__enlace{ margin-top:auto; display:inline-flex;
  align-items:center; gap:7px; color:inherit; text-decoration:none; font-size:.58rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; opacity:.7;
  transition:opacity .2s var(--ease-out); }
body[data-page="diseno-web"] .tira__celda:hover .bloque__enlace{ opacity:1; }
body[data-page="diseno-web"] .tira .flechita{ width:10px; height:10px; flex:none;
  transition:transform .24s var(--ease-out); }
body[data-page="diseno-web"] .tira__celda:hover .flechita{ transform:translate(2px,-2px); }
body[data-page="diseno-web"] .tira .bloque__cifra{ display:flex; align-items:center; gap:.1em; margin:0;
  font-size:clamp(1.25rem,1.8vw,1.6rem); font-weight:800; line-height:1; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums; }
body[data-page="diseno-web"] .tira .bloque__rotulo{ margin:8px 0 0; font-size:.78rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
body[data-page="diseno-web"] .tira .laurel{ width:.44em; height:.92em; flex:none; display:block;
  background:currentColor; opacity:.5;
  -webkit-mask:url('/assets/icons/laurel.svg') center / contain no-repeat;
  mask:url('/assets/icons/laurel.svg') center / contain no-repeat; }
body[data-page="diseno-web"] .tira .laurel--r{ transform:scaleX(-1); }
body[data-page="diseno-web"] .tira .flotador{ will-change:transform; }
body[data-page="diseno-web"] .tira__celda:hover .flotador{ animation:flotaCifra 4.2s ease-in-out infinite; }
@keyframes flotaCifra{
  0%{ transform:translate3d(0,0,0) rotate(0deg); }
  28%{ transform:translate3d(0,-7px,0) rotate(1.1deg); }
  58%{ transform:translate3d(0,-11px,0) rotate(-.8deg); }
  100%{ transform:translate3d(0,0,0) rotate(0deg); }
}

/* 10 · mas aire entre el video y como trabajamos */
body[data-page="diseno-web"] #forma-trabajo{ padding-top:clamp(140px,20vh,260px); }

/* 11 · los acordeones, mas estrechos y centrados */
body[data-page="diseno-web"] .forma-trabajo__body{ width:min(820px,100%); margin-inline:auto; }
body[data-page="diseno-web"] #contacto{ min-height:0;
  padding-top:clamp(70px,10vh,130px); padding-bottom:clamp(80px,11vh,150px); }

/* 14 · el formulario vive en un modal */
.presupuesto{ position:fixed; inset:0; z-index:970; display:grid; place-items:center;
  padding:clamp(14px,3vw,40px); }
.presupuesto[hidden]{ display:none; }
.presupuesto__fondo{ position:absolute; inset:0; background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .3s var(--ease-out); }
.presupuesto.is-abierto .presupuesto__fondo{ opacity:1; }
.presupuesto__caja{ position:relative; z-index:1; width:min(720px,100%); max-height:88vh;
  display:flex; flex-direction:column; background:#F1F1F1; color:#1a1410; border-radius:20px;
  overflow:hidden; box-shadow:0 40px 90px -40px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity .3s var(--ease-out), transform .38s var(--ease-out); }
.presupuesto.is-abierto .presupuesto__caja{ opacity:1; transform:none; }
.presupuesto__barra{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px clamp(20px,3vw,34px); border-bottom:1px solid rgba(0,0,0,.1); }
.presupuesto__titulo{ margin:0; font-size:1rem; font-weight:700; letter-spacing:-.02em; }
.presupuesto__cerrar{ width:38px; height:38px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(0,0,0,.14); background:transparent; cursor:pointer;
  color:inherit; transition:background-color .18s var(--ease-out), color .18s var(--ease-out); }
.presupuesto__cerrar:hover{ background:#1a1410; color:#fff; }
.presupuesto__cerrar svg{ width:17px; height:17px; }
.presupuesto__cuerpo{ overflow-y:auto; padding:clamp(20px,3vw,34px); }
.presupuesto__cuerpo .lead-form-card{ margin:0; max-width:none; }
body.presupuesto-abierto{ overflow:hidden; }

@media (max-width:900px){
  body[data-page="diseno-web"] .tira{ grid-template-columns:1fr; max-width:none; }
}
