

/* StudioDigitalCR v19 — section built with real HTML/CSS + separate image */
.sdx-story-code{
  width:100%;
  min-height:690px;
  display:grid;
  grid-template-columns:38% 62%;
  background:#06111b;
  color:#fff;
  overflow:hidden;
  position:relative;
}

.sdx-story-left{
  position:relative;
  z-index:3;
  padding:78px 5vw 64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(circle at 88% 35%,rgba(12,116,206,.18),transparent 34%),
    linear-gradient(135deg,#071522 0%,#04090e 100%);
}

.sdx-story-left:after{
  content:"";
  position:absolute;
  top:-8%;
  right:-74px;
  width:150px;
  height:116%;
  background:linear-gradient(180deg,rgba(26,139,239,.6),rgba(20,81,145,.10));
  transform:skewX(-16deg);
  opacity:.62;
  z-index:-1;
}

.sdx-story-kicker{
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:24px;
}
.sdx-story-kicker span{
  font:700 10px Space Grotesk;
  letter-spacing:.28em;
  color:#b2bec8;
}
.sdx-story-kicker i{
  width:72px;
  height:2px;
  background:#1aa6ff;
}

.sdx-story-code h2{
  margin:0 0 28px;
  font:600 clamp(50px,4.2vw,78px)/.91 Space Grotesk;
  letter-spacing:-.055em;
  color:#fff;
}
.sdx-story-code h2 em{
  display:inline-block;
  font-style:normal;
  color:#55bdf7;
}

.sdx-story-lead{
  margin:0 0 34px;
  max-width:570px;
  color:#c7d0d7;
  font-size:16px;
  line-height:1.7;
}

.sdx-story-features{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:36px;
}
.sdx-story-features article{min-width:0}
.sdx-feature-icon{
  width:54px;
  height:54px;
  border-radius:14px;
  border:1px solid rgba(70,183,248,.25);
  background:rgba(7,31,49,.78);
  color:#35aff4;
  display:grid;
  place-items:center;
  font-size:24px;
  margin-bottom:11px;
}
.sdx-story-features strong{
  display:block;
  color:#fff;
  font:700 10px Space Grotesk;
  letter-spacing:.03em;
}
.sdx-story-features small{
  display:block;
  margin-top:5px;
  color:#8798a5;
  font-size:10px;
}

.sdx-story-actions{
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap;
}
.sdx-story-main-btn{
  min-width:300px;
  height:68px;
  border-radius:999px;
  padding:0 18px 0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(90deg,#159ef4,#58d1f4);
  color:#04111b;
  text-decoration:none;
  font:700 10px Inter;
  box-shadow:0 15px 40px rgba(16,161,239,.20);
}
.sdx-story-main-btn b{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  background:#092235;color:#fff;
  font-size:16px;
}
.sdx-story-video-btn{
  display:flex;
  align-items:center;
  gap:15px;
  color:#fff;
  text-decoration:none;
}
.sdx-story-video-btn>span{
  width:66px;height:66px;border-radius:50%;
  border:2px solid #28aeff;
  display:grid;place-items:center;
  font-size:15px;
}
.sdx-story-video-btn strong{
  display:block;
  font-size:10px;
}
.sdx-story-video-btn small{
  display:block;
  color:#a4afb7;
  margin-top:4px;
  font-size:10px;
}

.sdx-story-right{
  position:relative;
  overflow:hidden;
  min-width:0;
}
.sdx-story-right:before{
  content:"";
  position:absolute;
  left:-76px;top:-10%;
  width:170px;height:120%;
  background:linear-gradient(180deg,rgba(21,133,233,.65),rgba(15,73,130,.14));
  transform:skewX(-15deg);
  z-index:2;
  pointer-events:none;
}
.sdx-story-right img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.01);
}
.sdx-story-right:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(3,12,19,.18),transparent 25%,transparent 78%,rgba(3,12,19,.12));
  pointer-events:none;
}

.sdx-story-script{
  position:absolute;
  top:7%;
  right:10%;
  z-index:4;
  color:#142d46;
  font-family:cursive;
  font-style:italic;
  font-size:clamp(34px,3vw,58px);
  line-height:.86;
  text-align:center;
  transform:rotate(-5deg);
  text-shadow:0 1px rgba(255,255,255,.15);
}
.sdx-story-script:after{
  content:"";
  display:block;
  width:140px;height:3px;
  background:#168ef0;
  margin:18px 0 0 auto;
  transform:rotate(-4deg);
}

.sdx-story-focus{
  position:absolute;
  right:5%;
  bottom:7%;
  z-index:4;
  width:min(380px,42%);
  padding:22px;
  display:flex;
  align-items:center;
  gap:18px;
  border:1px solid rgba(64,161,225,.24);
  border-radius:22px;
  background:rgba(4,19,31,.84);
  backdrop-filter:blur(12px);
  box-shadow:0 20px 45px rgba(0,0,0,.22);
}
.sdx-focus-icon{
  flex:0 0 58px;
  width:58px;height:58px;
  border-radius:16px;
  display:grid;place-items:center;
  background:rgba(17,77,115,.55);
  color:#46bdf8;
  font-size:28px;
}
.sdx-story-focus strong{
  display:block;
  font:700 13px/1.35 Space Grotesk;
  letter-spacing:.08em;
}
.sdx-story-focus span{
  display:block;
  color:#c5d0d7;
  font-size:11px;
  margin-top:7px;
}

.sdx-define-strip{
  background:#f5f4ef;
  height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:#1e2327;
}
.sdx-define-strip span{width:42px;height:2px;background:#168ef0}
.sdx-define-strip b{font:700 10px Space Grotesk;letter-spacing:.28em}

@media(max-width:1100px){
  .sdx-story-code{grid-template-columns:1fr;min-height:0}
  .sdx-story-left{padding:70px 6vw}
  .sdx-story-left:after{display:none}
  .sdx-story-right{min-height:560px}
  .sdx-story-right:before{display:none}
  .sdx-story-features{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:700px){
  .sdx-story-left{padding:58px 22px}
  .sdx-story-code h2{font-size:48px}
  .sdx-story-lead{font-size:14px}
  .sdx-story-features{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .sdx-story-main-btn{min-width:0;width:100%}
  .sdx-story-actions{align-items:flex-start;flex-direction:column}
  .sdx-story-right{min-height:440px}
  .sdx-story-script{font-size:34px;right:6%}
  .sdx-story-focus{width:88%;right:6%;bottom:6%}
}

/* StudioDigitalCR v20 — editable premium showreel */
.sdx-showcase{
  display:grid;
  grid-template-columns:37% 63%;
  min-height:720px;
  background:
    radial-gradient(circle at 35% 30%,rgba(18,108,187,.14),transparent 30%),
    linear-gradient(135deg,#07131d 0%,#03070b 100%);
  color:#fff;
  overflow:hidden;
  position:relative;
}
.sdx-showcase:before{
  content:"";
  position:absolute;
  left:-70px;top:-20%;
  width:150px;height:145%;
  background:linear-gradient(180deg,#0e5ea4,#052944);
  transform:skewX(-15deg);
  opacity:.95;
}
.sdx-showcase-left{
  position:relative;
  z-index:2;
  padding:76px 4.8vw 60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sdx-showcase-kicker{
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:24px;
}
.sdx-showcase-kicker span{
  font:700 10px Space Grotesk;
  letter-spacing:.26em;
  color:#b9c5ce;
}
.sdx-showcase-kicker i{
  width:80px;height:2px;background:#1ba8ff;
}
.sdx-showcase h2{
  font:700 clamp(48px,4.5vw,82px)/.91 Space Grotesk;
  letter-spacing:-.055em;
  margin:0 0 28px;
  color:#fff;
}
.sdx-showcase h2 em{
  font-style:normal;
  color:#39adf4;
}
.sdx-showcase-lead{
  margin:0 0 34px;
  max-width:570px;
  color:#c4cdd4;
  font-size:16px;
  line-height:1.65;
}
.sdx-showcase-features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:36px;
}
.sdx-showcase-features article{min-width:0}
.sdx-showcase-icon{
  width:54px;height:54px;
  display:grid;place-items:center;
  border:1px solid rgba(66,187,255,.22);
  background:rgba(7,32,50,.76);
  border-radius:14px;
  color:#36b5fb;
  font:700 20px Space Grotesk;
  margin-bottom:10px;
}
.sdx-showcase-features strong{
  display:block;
  font:700 10px Space Grotesk;
  color:#fff;
}
.sdx-showcase-features small{
  display:block;
  margin-top:5px;
  color:#8797a4;
  font-size:10px;
}
.sdx-showcase-actions{
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  align-items:center;
}
.sdx-showcase-main-btn{
  height:66px;
  min-width:300px;
  padding:0 18px 0 27px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(90deg,#179df4,#56d1f5);
  color:#04111b;
  text-decoration:none;
  font:700 10px Inter;
  box-shadow:0 15px 40px rgba(13,154,235,.18);
}
.sdx-showcase-main-btn b{
  width:42px;height:42px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#092236;color:white;
  font-size:16px;
}
.sdx-showcase-autoplay{
  display:flex;
  align-items:center;
  gap:12px;
}
.sdx-autoplay-dot{
  width:58px;height:58px;
  border:2px solid #2ab4ff;
  border-radius:50%;
  position:relative;
}
.sdx-autoplay-dot:before{
  content:"";
  width:10px;height:10px;
  border-radius:50%;
  background:#49e6a8;
  position:absolute;
  inset:0;margin:auto;
  box-shadow:0 0 18px rgba(73,230,168,.55);
  animation:sdPulse 1.6s infinite;
}
@keyframes sdPulse{0%,100%{transform:scale(.8);opacity:.65}50%{transform:scale(1.15);opacity:1}}
.sdx-showcase-autoplay strong{
  display:block;
  font-size:10px;
}
.sdx-showcase-autoplay small{
  display:block;
  color:#95a2ad;
  margin-top:4px;
  font-size:10px;
}

.sdx-showcase-right{
  padding:64px 4.5vw 58px 0;
  position:relative;
  z-index:2;
}
.sdx-showcase-frame{
  min-height:590px;
  height:100%;
  border:1px solid rgba(73,187,248,.58);
  background:
    linear-gradient(rgba(54,134,189,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(54,134,189,.18) 1px,transparent 1px),
    radial-gradient(circle at 75% 20%,rgba(18,102,183,.25),transparent 32%),
    #061426;
  background-size:74px 74px,74px 74px,auto,auto;
  border-radius:20px;
  padding:34px 36px 24px;
  box-shadow:0 24px 70px rgba(0,0,0,.30);
  overflow:hidden;
}
.sdx-showcase-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:30px;
  margin-bottom:24px;
}
.sdx-showcase-head>div:first-child>span{
  font:700 10px Space Grotesk;
  letter-spacing:.08em;
  color:#2ab7ff;
}
.sdx-showcase-head h3{
  margin:9px 0 5px;
  font:600 clamp(28px,2.4vw,46px)/1 Space Grotesk;
  letter-spacing:-.035em;
}
.sdx-showcase-head h3 em{
  color:#28aefd;
  font-style:normal;
}
.sdx-showcase-head p{
  margin:0;
  color:#9cacb8;
  font-size:12px;
}
.sdx-handwritten{
  color:#d5e3ef;
  text-align:center;
  font-family:cursive;
  font-style:italic;
  font-size:25px;
  line-height:.95;
  transform:rotate(-5deg);
  padding-top:8px;
}
.sdx-handwritten:after{
  content:"";
  display:block;
  width:105px;height:2px;
  margin:14px 0 0 auto;
  background:#168ff1;
}

.sdx-showcase-stage{
  display:grid;
  grid-template-columns:1fr .96fr;
  gap:18px;
  position:relative;
  align-items:stretch;
}
.sdx-code-window{
  min-height:320px;
  background:#02070e;
  border:1px solid rgba(71,176,236,.24);
  border-radius:16px;
  padding:18px 20px 22px;
  overflow:hidden;
}
.sdx-window-dots,.sdx-browser-bar{
  display:flex;gap:7px;margin-bottom:22px;
}
.sdx-window-dots i,.sdx-browser-bar i{
  width:10px;height:10px;border-radius:50%;
  background:#ff6258;
}
.sdx-window-dots i:nth-child(2),.sdx-browser-bar i:nth-child(2){background:#ffbd44}
.sdx-window-dots i:nth-child(3),.sdx-browser-bar i:nth-child(3){background:#31c866}
.sdx-code-window pre{
  margin:0;
  white-space:pre-wrap;
  color:#e4e9ee;
  font:15px/1.75 monospace;
}
.sdx-code-window code>span:first-child{color:#45cbff}
.sdx-code-window .c1{color:#4fc7fa}.sdx-code-window .c2{color:#8e7cff}.sdx-code-window .c3{color:#40da8d}.sdx-code-window .c4{color:#f3b845}
.sdx-code-window small{color:#64798b}

.sdx-browser-window{
  min-height:320px;
  border-radius:16px;
  background:#eef4fb;
  overflow:hidden;
  color:#0e2233;
  display:flex;
  flex-direction:column;
  box-shadow:0 15px 40px rgba(0,0,0,.18);
}
.sdx-browser-bar{
  height:40px;
  margin:0;
  padding:15px 16px 0;
  background:#dfe9f4;
}
.sdx-browser-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  flex:1;
}
.sdx-browser-copy{
  padding:28px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.sdx-browser-copy>small{
  font:700 8px Space Grotesk;
  color:#385369;
}
.sdx-browser-copy h4{
  margin:14px 0 8px;
  font:700 25px/1 Space Grotesk;
  letter-spacing:-.04em;
}
.sdx-browser-copy h4 em{color:#168cf5;font-style:normal}
.sdx-browser-copy p{
  margin:0 0 18px;
  color:#667b8e;
  font-size:10px;
  line-height:1.45;
}
.sdx-browser-copy a{
  width:max-content;
  background:#168cf5;
  color:white;
  text-decoration:none;
  padding:11px 15px;
  border-radius:999px;
  font:700 8px Inter;
}
.sdx-browser-media{
  min-width:0;
  overflow:hidden;
  background:#06101b;
}
.sdx-browser-media video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  pointer-events:none;
}
.sdx-performance{
  padding:10px 16px;
  color:#415669;
  font-size:9px;
  text-align:right;
  background:#f3f7fb;
}

.sdx-tech-badge{
  position:absolute;
  left:47%;
  bottom:15%;
  transform:translateX(-50%);
  padding:16px 19px;
  border-radius:14px;
  border:1px solid rgba(61,174,239,.45);
  background:rgba(7,35,57,.93);
  color:#fff;
  display:flex;
  gap:11px;
  align-items:center;
  box-shadow:0 14px 30px rgba(0,0,0,.25);
  font-size:10px;
}
.sdx-tech-badge:first-letter{color:#33b9ff}
.sdx-player-line{
  margin-top:22px;
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:10px;
  color:#b2c0cc;
}
.sdx-live-dot{
  width:8px;height:8px;
  background:#48e6a6;
  border-radius:50%;
  box-shadow:0 0 13px rgba(72,230,166,.65);
}
.sdx-player-line b{font-size:9px;color:#fff}
.sdx-player-line div{height:2px;background:linear-gradient(90deg,#168cf5 0 42%,rgba(255,255,255,.18) 42%)}
.sdx-player-line small{font-size:8px;letter-spacing:.08em}

.sdx-showcase-divider{
  height:86px;
  background:#f5f4ef;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  color:#26323b;
}
.sdx-showcase-divider span{width:42px;height:2px;background:#168cf5}
.sdx-showcase-divider b{font:700 10px Space Grotesk;letter-spacing:.26em}

@media(max-width:1150px){
  .sdx-showcase{grid-template-columns:1fr}
  .sdx-showcase-left{padding:70px 6vw 45px}
  .sdx-showcase-right{padding:20px 6vw 70px}
}
@media(max-width:760px){
  .sdx-showcase-left{padding:58px 22px 40px}
  .sdx-showcase h2{font-size:50px}
  .sdx-showcase-features{grid-template-columns:repeat(2,1fr);gap:22px 12px}
  .sdx-showcase-main-btn{width:100%;min-width:0}
  .sdx-showcase-right{padding:15px 18px 58px}
  .sdx-showcase-frame{padding:24px 18px;min-height:0}
  .sdx-showcase-head{display:block}
  .sdx-handwritten{display:none}
  .sdx-showcase-stage{grid-template-columns:1fr}
  .sdx-tech-badge{display:none}
  .sdx-code-window,.sdx-browser-window{min-height:280px}
  .sdx-player-line small{display:none}
}


/* v21 — corrección visual del video del showreel */
.sdx-showcase-stage{
  grid-template-columns:minmax(300px,.82fr) minmax(520px,1.35fr) !important;
  align-items:stretch !important;
}
.sdx-browser-window{
  min-height:360px !important;
}
.sdx-browser-body{
  grid-template-columns:36% 64% !important;
  min-height:285px !important;
}
.sdx-browser-copy{
  position:relative;
  z-index:2;
  padding:26px 20px !important;
}
.sdx-browser-media{
  position:relative !important;
  min-width:0 !important;
  min-height:285px !important;
  overflow:hidden !important;
  background:#020810 !important;
}
.sdx-browser-media video{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  pointer-events:none !important;
  border:0 !important;
}
.sdx-performance{
  position:relative;
  z-index:3;
}
@media(max-width:1350px){
  .sdx-showcase-stage{
    grid-template-columns:.9fr 1.1fr !important;
  }
  .sdx-browser-body{
    grid-template-columns:40% 60% !important;
  }
}
@media(max-width:900px){
  .sdx-showcase-stage{grid-template-columns:1fr !important}
  .sdx-browser-window{min-height:430px !important}
  .sdx-browser-body{
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(240px,1fr) !important;
  }
  .sdx-browser-media{min-height:240px !important}
}
@media(max-width:560px){
  .sdx-browser-window{min-height:390px !important}
  .sdx-browser-media{min-height:220px !important}
}

/* v22 — video completo, sin recortes */
.sdx-browser-window{
  min-height:420px !important;
}
.sdx-browser-body{
  display:grid !important;
  grid-template-columns:30% 70% !important;
  min-height:335px !important;
}
.sdx-browser-copy{
  padding:24px 18px !important;
}
.sdx-browser-media{
  position:relative !important;
  min-height:335px !important;
  background:#02070d !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.sdx-browser-media video{
  position:static !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#02070d !important;
  display:block !important;
  pointer-events:none !important;
}

/* Give the right mockup more horizontal room */
.sdx-showcase-stage{
  grid-template-columns:minmax(280px,.72fr) minmax(620px,1.5fr) !important;
}

/* Keep performance bar outside the video content */
.sdx-performance{
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
}

@media(max-width:1400px){
  .sdx-showcase-stage{
    grid-template-columns:minmax(260px,.78fr) minmax(540px,1.35fr) !important;
  }
  .sdx-browser-body{
    grid-template-columns:32% 68% !important;
  }
}
@media(max-width:1050px){
  .sdx-showcase-stage{grid-template-columns:1fr !important}
  .sdx-browser-window{min-height:520px !important}
  .sdx-browser-body{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr !important;
    min-height:430px !important;
  }
  .sdx-browser-media{
    min-height:300px !important;
    aspect-ratio:16/9 !important;
  }
  .sdx-browser-media video{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }
}
@media(max-width:600px){
  .sdx-browser-window{min-height:455px !important}
  .sdx-browser-media{min-height:230px !important}
}


/* v23 — servicios premium, completamente editables */
.sdx-services-v23{
  background:
    radial-gradient(circle at 12% 15%,rgba(30,136,255,.06),transparent 28%),
    linear-gradient(180deg,#fafaf8 0%,#f3f6f9 100%);
  color:#0e2038;
  padding:72px 4.2vw 88px;
  position:relative;
  overflow:hidden;
}
.sdx-services-v23:before{
  content:"";
  position:absolute;
  width:380px;height:380px;
  left:36%;bottom:-250px;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(24,137,255,.08),rgba(119,89,255,.03));
  transform:rotate(25deg);
}
.sdx-services-v23-inner{
  max-width:1840px;
  margin:0 auto;
  display:grid;
  grid-template-columns:31% 69%;
  gap:42px;
  position:relative;
  z-index:2;
}
.sdx-services-v23-intro{
  padding:12px 4px 0;
  position:relative;
}
.sdx-services-v23-kicker{
  display:flex;align-items:center;gap:14px;
  margin-bottom:22px;
}
.sdx-services-v23-kicker span{
  font:700 10px Space Grotesk;
  color:#168af5;
  letter-spacing:.24em;
}
.sdx-services-v23-kicker i{
  width:48px;height:2px;background:#168af5;
}
.sdx-services-v23 h2{
  margin:0 0 24px;
  font:600 clamp(48px,4.3vw,78px)/.92 Space Grotesk;
  letter-spacing:-.055em;
  color:#10213b;
}
.sdx-services-v23 h2 em{
  font-style:normal;color:#278df7;
}
.sdx-services-v23-intro>p{
  max-width:610px;
  margin:0 0 28px;
  color:#5f6f82;
  font-size:16px;
  line-height:1.55;
}
.sdx-services-benefits{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:28px;
}
.sdx-services-benefits span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#576678;
  padding-right:16px;
  border-right:1px solid #d8e0e7;
}
.sdx-services-benefits span:last-child{border-right:0}
.sdx-services-benefits span::first-letter{
  color:#168af5;
  font-size:16px;
}
.sdx-services-main-btn{
  width:max-content;
  min-width:325px;
  height:64px;
  border-radius:999px;
  background:linear-gradient(90deg,#178ff4,#4ec6f5);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 17px 0 27px;
  text-decoration:none;
  font:700 11px Inter;
  box-shadow:0 16px 40px rgba(22,142,245,.18);
}
.sdx-services-main-btn b{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:#102b4b;
  font-size:17px;
}
.sdx-services-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:40px;
}
.sdx-services-stats>div{
  display:flex;gap:10px;align-items:center;
  padding-right:15px;
  border-right:1px solid #d8e0e7;
}
.sdx-services-stats>div:last-child{border-right:0}
.sdx-services-stats strong{
  font:700 36px Space Grotesk;
  color:#178af5;
  letter-spacing:-.04em;
}
.sdx-services-stats span{
  color:#5d6c7f;
  font-size:10px;
  line-height:1.25;
}
.sdx-services-script{
  margin-top:28px;
  color:#15365d;
  font-family:cursive;
  font-style:italic;
  font-size:25px;
  line-height:.9;
  transform:rotate(-5deg);
  width:max-content;
}
.sdx-services-script:after{
  content:"";display:block;
  width:90px;height:2px;background:#168af5;
  margin:12px 0 0 auto;
}

.sdx-services-cards{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.sdx-service-card{
  background:#fff;
  border:1px solid #e3e9ef;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(15,38,65,.08);
  display:flex;
  flex-direction:column;
  position:relative;
  min-width:0;
  transition:transform .3s ease,box-shadow .3s ease;
}
.sdx-service-card:hover{
  transform:translateY(-7px);
  box-shadow:0 25px 60px rgba(15,38,65,.13);
}
.sdx-service-photo{
  height:225px;
  overflow:hidden;
  background:#dfe7ef;
}
.sdx-service-photo img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}
.sdx-service-card:hover .sdx-service-photo img{transform:scale(1.045)}
.sdx-service-icon{
  position:absolute;
  top:190px;left:18px;
  width:58px;height:58px;
  border-radius:16px;
  color:#fff;
  display:grid;place-items:center;
  font:700 22px Space Grotesk;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  border:2px solid rgba(255,255,255,.75);
}
.sdx-service-icon.blue{background:linear-gradient(145deg,#168af5,#53c5fb)}
.sdx-service-icon.violet{background:linear-gradient(145deg,#7c4df6,#bd54ff)}
.sdx-service-icon.green{background:linear-gradient(145deg,#12bb69,#49e08b)}
.sdx-service-icon.red{background:linear-gradient(145deg,#ef4b5d,#ff816f)}
.sdx-service-icon.orange{background:linear-gradient(145deg,#ff9d0a,#ffbd34)}
.sdx-service-number{
  margin:44px 22px 0;
  font:700 10px Space Grotesk;
  color:#9aa8b6;
}
.sdx-service-card h3{
  margin:10px 22px 10px;
  font:600 19px/1.05 Space Grotesk;
  letter-spacing:-.025em;
  color:#10213b;
}
.sdx-service-card p{
  margin:0 22px 26px;
  color:#637286;
  font-size:11px;
  line-height:1.5;
  flex:1;
}
.sdx-service-card>a{
  margin:0 22px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#107de6;
  text-decoration:none;
  font-size:10px;
  font-weight:700;
}
.sdx-service-card>a b{
  width:34px;height:34px;
  border:2px solid #168af5;border-radius:50%;
  display:grid;place-items:center;
  font-size:14px;
}
.sdx-services-contact{
  max-width:1840px;
  margin:28px auto 0;
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:flex-end;
  color:#10213b;
}
.sdx-services-contact>span{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:#e9f5ff;color:#168af5;font-size:20px;
}
.sdx-services-contact strong{display:block;font-size:11px}
.sdx-services-contact small{display:block;color:#6d7c8e;margin-top:3px;font-size:10px}
.sdx-services-contact>a{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:#168af5;color:#fff;text-decoration:none;
  font-size:16px;
}

@media(max-width:1500px){
  .sdx-services-v23-inner{grid-template-columns:29% 71%;gap:28px}
  .sdx-service-photo{height:190px}
  .sdx-service-icon{top:157px}
}
@media(max-width:1250px){
  .sdx-services-v23-inner{grid-template-columns:1fr}
  .sdx-services-cards{grid-template-columns:repeat(3,1fr)}
  .sdx-services-v23-intro{max-width:760px}
}
@media(max-width:820px){
  .sdx-services-v23{padding:58px 22px 70px}
  .sdx-services-v23 h2{font-size:52px}
  .sdx-services-cards{grid-template-columns:1fr 1fr}
  .sdx-services-benefits{display:grid;grid-template-columns:1fr}
  .sdx-services-benefits span{border-right:0}
}
@media(max-width:560px){
  .sdx-services-main-btn{width:100%;min-width:0}
  .sdx-services-stats{grid-template-columns:1fr 1fr}
  .sdx-services-cards{grid-template-columns:1fr}
  .sdx-service-photo{height:240px}
  .sdx-service-icon{top:207px}
  .sdx-services-contact{justify-content:flex-start}
}


/* v24 — servicios compactos + imágenes completas sin recorte */
.sdx-services-v23{
  padding:56px 4.2vw 64px !important;
}

.sdx-services-v23-inner{
  align-items:start !important;
}

.sdx-services-v23-intro{
  padding-top:4px !important;
}

.sdx-services-v23 h2{
  font-size:clamp(42px,3.6vw,66px) !important;
  line-height:.94 !important;
  margin-bottom:18px !important;
}

.sdx-services-v23-intro>p{
  margin-bottom:22px !important;
  font-size:15px !important;
}

.sdx-services-benefits{
  margin-bottom:22px !important;
}

.sdx-services-main-btn{
  height:58px !important;
  min-width:300px !important;
}

.sdx-services-stats{
  margin-top:28px !important;
}

.sdx-services-script{
  margin-top:20px !important;
}

.sdx-services-cards{
  align-items:start !important;
  gap:14px !important;
}

.sdx-service-card{
  min-height:0 !important;
  height:auto !important;
  align-self:start !important;
}

.sdx-service-photo{
  height:165px !important;
  background:#eef2f6 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px !important;
}

.sdx-service-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  background:#eef2f6 !important;
  transform:none !important;
}

.sdx-service-card:hover .sdx-service-photo img{
  transform:scale(1.015) !important;
}

.sdx-service-icon{
  top:139px !important;
  width:52px !important;
  height:52px !important;
  border-radius:14px !important;
}

.sdx-service-number{
  margin:38px 18px 0 !important;
}

.sdx-service-card h3{
  margin:8px 18px 7px !important;
  font-size:17px !important;
  line-height:1.08 !important;
}

.sdx-service-card p{
  margin:0 18px 18px !important;
  font-size:10.5px !important;
  line-height:1.45 !important;
  flex:0 0 auto !important;
  min-height:46px !important;
}

.sdx-service-card>a{
  margin:0 18px 16px !important;
}

.sdx-service-card>a b{
  width:30px !important;
  height:30px !important;
}

.sdx-services-contact{
  margin-top:20px !important;
}

@media(max-width:1500px){
  .sdx-service-photo{
    height:150px !important;
  }
  .sdx-service-icon{
    top:125px !important;
  }
}

@media(max-width:1250px){
  .sdx-services-v23{
    padding-top:50px !important;
  }
  .sdx-services-cards{
    grid-template-columns:repeat(3,1fr) !important;
  }
  .sdx-service-photo{
    height:180px !important;
  }
  .sdx-service-icon{
    top:154px !important;
  }
}

@media(max-width:820px){
  .sdx-services-cards{
    grid-template-columns:1fr 1fr !important;
  }
}

@media(max-width:560px){
  .sdx-services-v23{
    padding:46px 20px 54px !important;
  }
  .sdx-services-cards{
    grid-template-columns:1fr !important;
  }
  .sdx-service-photo{
    height:210px !important;
  }
  .sdx-service-icon{
    top:182px !important;
  }
}


/* v25 — service cards equal height + one dedicated image each */
.sdx-services-cards{
  align-items:stretch !important;
}
.sdx-service-card{
  height:100% !important;
  min-height:430px !important;
  display:flex !important;
  flex-direction:column !important;
}
.sdx-service-photo{
  height:190px !important;
  padding:0 !important;
  background:#edf2f7 !important;
}
.sdx-service-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
  background:#edf2f7 !important;
}
.sdx-service-icon{
  top:162px !important;
}
.sdx-service-number{
  margin-top:40px !important;
}
.sdx-service-card h3{
  min-height:42px !important;
  display:flex !important;
  align-items:flex-start !important;
}
.sdx-service-card p{
  min-height:64px !important;
  flex:1 1 auto !important;
}
.sdx-service-card>a{
  margin-top:auto !important;
}
@media(max-width:1500px){
  .sdx-service-card{min-height:420px !important}
  .sdx-service-photo{height:175px !important}
  .sdx-service-icon{top:148px !important}
}
@media(max-width:1250px){
  .sdx-service-card{min-height:410px !important}
  .sdx-service-photo{height:190px !important}
  .sdx-service-icon{top:162px !important}
}
@media(max-width:560px){
  .sdx-service-card{min-height:0 !important}
  .sdx-service-photo{height:220px !important}
  .sdx-service-icon{top:192px !important}
}


/* StudioDigitalCR — Scroll Reveal */
:root{
  --sd-reveal-distance:42px;
  --sd-reveal-duration:.85s;
  --sd-reveal-ease:cubic-bezier(.2,.72,.2,1);
}

html.sd-js .sd-reveal-section,
html.sd-js .sd-reveal-item,
html.sd-js .sd-reveal-card{
  opacity:0;
  transform:translate3d(0,var(--sd-reveal-distance),0);
  transition:
    opacity var(--sd-reveal-duration) var(--sd-reveal-ease),
    transform var(--sd-reveal-duration) var(--sd-reveal-ease);
  will-change:opacity,transform;
}

html.sd-js .sd-reveal-item[data-reveal="left"]{
  transform:translate3d(-48px,0,0);
}
html.sd-js .sd-reveal-item[data-reveal="right"]{
  transform:translate3d(48px,0,0);
}

html.sd-js .sd-reveal-section.is-visible,
html.sd-js .sd-reveal-item.is-visible,
html.sd-js .sd-reveal-card.is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:auto;
}

/* Stagger cards inside a visible section */
html.sd-js .sd-reveal-card{
  transition-delay:var(--sd-delay,0ms);
}

/* Hero should appear quickly when page opens */
html.sd-js .sdx-hero.sd-reveal-section{
  transition-duration:.7s;
}

/* Slight scale for media blocks */
html.sd-js .sdx-story-right.sd-reveal-item,
html.sd-js .sdx-showcase-right.sd-reveal-item,
html.sd-js .sdx-hero-panels-v15.sd-reveal-item{
  transform:translate3d(0,32px,0) scale(.985);
}
html.sd-js .sdx-story-right.sd-reveal-item.is-visible,
html.sd-js .sdx-showcase-right.sd-reveal-item.is-visible,
html.sd-js .sdx-hero-panels-v15.sd-reveal-item.is-visible{
  transform:translate3d(0,0,0) scale(1);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  html.sd-js .sd-reveal-section,
  html.sd-js .sd-reveal-item,
  html.sd-js .sd-reveal-card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}
