﻿/* Presentación comercial exclusiva de /servicios. */
html > body.services-commercial{margin:0;background:#f7f7fb;color:#24233e;font-family:Inter,"Segoe UI",Arial,sans-serif;line-height:1.65;--border:#e4e4ef;--muted:#72738b;}
.services-commercial header.nav{top:0;border-radius:0;background:#fff;border-bottom:1px solid #e4e4ef;box-shadow:none;}
.services-commercial header.nav .nav-inner{max-width:1280px;padding:16px 32px;}
.services-commercial main.services-page{max-width:1280px;margin:auto;padding:48px 32px 64px;}
.services-commercial .services-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;padding:32px 0 56px;}
.services-commercial .commercial-eyebrow{display:block;font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:#3d3789;}
.services-commercial .hero-title{font-size:clamp(38px,4.7vw,64px);line-height:1.08;letter-spacing:-.045em;color:#24233e;margin:20px 0 24px;}
.services-commercial .hero-title span{color:#3d3789;}
.services-commercial .services-intro p{font-size:17px;line-height:1.8;color:#72738b;max-width:510px;}
.services-commercial .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.services-commercial .btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 19px;border-radius:10px;font:inherit;font-size:13px;font-weight:650;}
.services-commercial .btn-primary{background:#ef7d00;border-color:#ef7d00;color:white;box-shadow:none;}
.services-commercial .btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;background:#fff;border:1px solid #dfdeea;border-radius:10px;color:#3d3789;font-size:13px;text-decoration:none;}
.services-commercial .btn:hover,.services-commercial .btn-ghost:hover{filter:brightness(.97);}
.services-commercial .hero-media{position:relative;min-width:0;width:100%;max-width:520px;box-sizing:border-box;justify-self:center;background:#fff;border:1px solid #e4e4ef;border-radius:18px;padding:12px;box-shadow:0 20px 48px #29254f12;overflow:hidden;}
/* El logo ocupa la parte inferior del video: recortar el fondo superior vacío. */
.services-commercial .hero-media video{display:block;width:100%;height:auto;max-height:none;aspect-ratio:2.65;object-fit:cover;object-position:center bottom;border-radius:8px;background:#fff;}
.services-commercial .services-media-caption{display:flex;justify-content:space-between;gap:12px;margin-top:18px;border-top:1px solid #e4e4ef;padding-top:16px;font-size:11px;color:#72738b;}
.services-commercial .services-media-caption strong{letter-spacing:.12em;color:#3d3789;}
.services-commercial .services-overview{background:none;border:0;border-top:1px solid #e4e4ef;border-radius:0;padding:36px 0 40px;margin:0;box-shadow:none;}
.services-commercial .services-section-heading{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:end;margin-bottom:26px;}
.services-commercial .services-section-heading .commercial-eyebrow{grid-column:1/-1;margin-bottom:12px;}
.services-commercial .services-section-heading h2{font-size:30px;line-height:1.2;letter-spacing:-.025em;margin:0;color:#24233e;}
.services-commercial .services-section-heading p{font-size:14px;line-height:1.8;color:#72738b;margin:0;}
.services-commercial .services-overview-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0;margin:0;list-style:none;counter-reset:portfolio;}
.services-commercial .services-overview-list li{display:block;min-width:0;padding:24px;background:#fff;border:1px solid #e4e4ef;border-radius:18px;counter-increment:portfolio;box-shadow:none;}
/* Completar la última fila del portafolio de cinco servicios. */
@media(min-width:1001px){.services-commercial .services-overview-list{grid-template-columns:repeat(6,minmax(0,1fr));}.services-commercial .services-overview-list>li{grid-column:span 2;}.services-commercial .services-overview-list>li:nth-child(4),.services-commercial .services-overview-list>li:nth-child(5){grid-column:span 3;}}
@media(min-width:481px) and (max-width:1000px){.services-commercial .services-overview-list>li:last-child:nth-child(odd){grid-column:1/-1;}}
.services-commercial .services-overview-list li::before{content:'0' counter(portfolio);display:block;position:static;width:auto;height:auto;margin:0 0 20px;background:none;color:#ef7d00;font-size:12px;font-weight:750;border:0;}
.services-commercial .services-overview-list h3{font-size:18px;line-height:1.3;color:#24233e;margin:0 0 12px;}
.services-commercial .services-overview-list p{font-size:13px;line-height:1.8;color:#72738b;margin:0;}
.services-commercial .services-overview-extra{margin:18px 0 0;padding:18px 22px;border-radius:12px;border:1px solid #dedbea;background:#efedf8;color:#3d3789;font-size:14px;}
.services-commercial .services-detail{margin-top:0;padding-top:12px;scroll-margin-top:110px;}
.services-commercial .services-detail > h2{font-size:30px;line-height:1.2;letter-spacing:-.025em;color:#24233e;margin:12px 0 24px;}
.services-commercial .services-carousel[data-focus="center"] .service-slides>.flyer{background:#fff;border:1px solid #e4e4ef;border-radius:20px;box-shadow:0 8px 24px #29254f09;}
.services-commercial .services-carousel[data-focus="center"] .service-slides>.focus-active{border-top:3px solid #ef7d00;box-shadow:0 14px 32px #29254f14;}
.services-commercial .flyer h3{color:#24233e;letter-spacing:-.02em;}
.services-commercial .flyer h4{color:#3d3789;}
.services-commercial .flyer p{color:#72738b;}
.services-commercial .service-toolbar{border-radius:12px;}
.services-commercial .services-closing{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px 36px;margin-top:36px;border-radius:20px;background:linear-gradient(120deg,#29254f,#46408c);color:#fff;}
.services-commercial .services-closing h2{font-size:28px;line-height:1.25;letter-spacing:-.025em;margin:0 0 10px;color:#fff;}
.services-commercial .services-closing p{font-size:14px;line-height:1.8;color:#d8d3ec;margin:0;}
.services-commercial .services-closing .btn{flex-shrink:0;}
.services-commercial .footer{background:#fff;border-top:1px solid #e4e4ef;padding:28px 32px;}
.services-commercial :is(a,button):focus-visible{outline:3px solid #ef7d00;outline-offset:3px;}
@media(max-width:1000px){.services-commercial .services-intro{gap:32px;}.services-commercial .services-overview-list{grid-template-columns:1fr 1fr;}}
@media(max-width:760px){.services-commercial main.services-page{padding:24px 20px 36px;}.services-commercial .services-intro{grid-template-columns:1fr;padding:16px 0 32px;gap:28px;}.services-commercial .services-section-heading{grid-template-columns:1fr;gap:14px;}.services-commercial .services-section-heading .commercial-eyebrow{margin-bottom:0;}.services-commercial .services-closing{flex-direction:column;align-items:flex-start;padding:26px;}.services-commercial .footer{padding:24px 16px;}}
@media(max-width:480px){.services-commercial .services-overview-list{grid-template-columns:1fr;}.services-commercial .hero-cta .btn{flex:1 1 auto;}.services-commercial .services-media-caption{flex-wrap:wrap;}}

/* Un pequeño rebote al explorar las tarjetas y los pasos con el cursor. */
@media(hover:hover) and (pointer:fine){
  .services-commercial .services-overview-list>li{transition:transform .4s cubic-bezier(.2,.8,.3,1.5),box-shadow .3s ease,border-color .3s ease;}
  .services-commercial .services-overview-list>li:hover{transform:translateY(-7px);border-color:#ef7d0080;box-shadow:0 14px 28px #29254f20;}
  .services-commercial .steps .step-badge{transition:transform .45s cubic-bezier(.2,.8,.3,1.5);}
  .services-commercial .steps .step-badge .icon{transition:transform .45s cubic-bezier(.2,.8,.3,1.5),box-shadow .3s ease;}
  .services-commercial .steps .step-item:hover .step-badge{transform:translateY(-8px) scale(1.04);}
  .services-commercial .steps .step-item:hover .icon{transform:translateY(-3px) rotate(-8deg);box-shadow:0 14px 26px #3d378930;}
}
@media(prefers-reduced-motion:reduce){
  .services-commercial .services-overview-list>li,.services-commercial .steps .step-badge,.services-commercial .steps .step-badge .icon{transition:none;}
  .services-commercial .services-overview-list>li:hover,.services-commercial .steps .step-item:hover .step-badge,.services-commercial .steps .step-item:hover .icon{transform:none;}
}

/* Fondo independiente del contenido: cambios suaves ligados al recorrido. */
html > body.services-commercial{position:relative;isolation:isolate;}
.services-scroll-background{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 5% 15%,#3d37895c,transparent 68%),linear-gradient(135deg,#eeebfa,#f7f7fb);}
.services-commercial main,.services-commercial>.footer{position:relative;z-index:1;}
.services-scroll-background span{position:absolute;inset:-8%;display:block;width:116%;height:116%;}
.services-scroll-background .services-gradient-purple{background:radial-gradient(ellipse at 5% 15%,#3d37895c,transparent 68%),radial-gradient(ellipse at 95% 80%,#3d378938,transparent 65%),linear-gradient(135deg,#eeebfa,#f7f7fb);}
.services-scroll-background .services-gradient-blue{background:radial-gradient(ellipse at 95% 20%,#3c53f15c,transparent 68%),radial-gradient(ellipse at 5% 80%,#3c53f138,transparent 65%),linear-gradient(135deg,#edf1ff,#f7f7fb);opacity:0;}
.services-scroll-background .services-gradient-orange{background:radial-gradient(ellipse at 8% 85%,#ef7d005c,transparent 68%),radial-gradient(ellipse at 95% 15%,#ef7d0038,transparent 65%),linear-gradient(135deg,#fff3e7,#f7f7fb);opacity:0;}
.services-scroll-background::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#ffffff38,transparent 80%);}
.services-commercial main.services-page{background:transparent;}
.services-commercial main.services-page>.services-overview{background:transparent;box-shadow:none;}
.services-commercial main.services-page>.steps,.services-commercial main.services-page>.tailored-solution{background:#ffffffde;}
@media(prefers-reduced-motion:reduce){.services-scroll-background .services-gradient-blue{opacity:.2;}.services-scroll-background .services-gradient-orange{opacity:.15;}}
@media print{.services-scroll-background{display:none;}}
