/* Servicios generales, menú desplegable y fichas según los PSD 3, 4 y 5. */
body:has(#servicios:not([hidden]),.service-detail:not([hidden])) header nav a,
body:has(#servicios:not([hidden]),.service-detail:not([hidden])) header nav button{font-family:Quedora,Arial,sans-serif;font-weight:500}
header nav .nav-services{display:inline-flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap}
header nav .nav-services #services-toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:24px;margin-left:0;color:#a8b9ce;font-size:16px;line-height:1;text-decoration:none;transition:color .2s,transform .2s}
header nav .nav-services #services-toggle[aria-expanded="true"]{color:#7bc3ff;transform:rotate(180deg)}
header nav .nav-services #services-toggle:hover{color:#7bc3ff}

/* Menú de la pestaña Servicios: cinco iconos alternados sobre un fondo azul difuso. */
header .mega{left:50%;right:auto;transform:translateX(-50%);width:min(850px,calc(100vw - 36px));max-width:none;min-height:230px;padding:24px 30px 20px;border:1px solid #3b4a54;border-radius:0 0 13px 13px;background:linear-gradient(160deg,#0b1013,#020507);box-shadow:inset 0 1px 9px #8bd8ff30,0 20px 52px #000b;overflow:hidden;isolation:isolate}
header .mega:before{content:'';position:absolute;z-index:0;inset:0;background:url('/design-services/menu-glass.png') center bottom/100% 100% no-repeat;opacity:.95;pointer-events:none}
header .mega:after{content:'';position:absolute;z-index:0;left:17%;right:17%;bottom:-24px;height:70px;background:radial-gradient(ellipse,#0068d055,transparent 70%);filter:blur(12px);pointer-events:none}
header .mega .ref-service-row{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;gap:10px;margin:0 auto;max-width:800px}
header .mega .ref-service-choice{align-self:start;padding:0 2px}
header .mega .ref-service-choice:nth-child(even){transform:translateY(46px)}
header .mega .hex-icon{width:72px;height:84px;margin:0 auto 8px;color:#a2a8aa;background:linear-gradient(140deg,#171b1f,#030506);border:1px solid #31404a;filter:none}
header .mega .hex-icon svg{width:37px;height:37px}
header .mega .ref-service-choice>span:last-child{font:500 9px/1.25 Quedora,Arial,sans-serif;letter-spacing:.03em}
header .mega .ref-service-choice .mega-label{display:block;width:128px;max-width:100%;margin:0 auto;color:#e6e9ed;white-space:nowrap;text-align:center;font-size:10px;letter-spacing:.04em;line-height:1.18}
header .mega .ref-service-choice[data-service=cercos]{--accent:#08b7ae!important}
header .mega .ref-service-choice:hover .hex-icon,header .mega .ref-service-choice:focus-visible .hex-icon{color:var(--accent);filter:drop-shadow(0 0 9px var(--accent))}
header .mega .mega-see-more{position:absolute;right:26px;bottom:13px;z-index:2;margin:0;color:#a8cce8;font:500 10px/1 Quedora,Arial,sans-serif;letter-spacing:.08em}

/* Vista general. */
#servicios{font-family:Poppins,Arial,sans-serif;padding-top:78px}
#servicios h1{font-family:Quedora,Arial,sans-serif;font-weight:400;font-size:clamp(33px,4vw,58px);letter-spacing:.14em;line-height:1.35}
#servicios .intro-copy{font-size:clamp(14px,1.45vw,20px)}
#servicios .ref-service-row{max-width:910px;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin:74px auto 0}
#servicios .ref-service-choice .hex-icon{width:90px;height:104px;margin-bottom:13px}
#servicios .ref-service-choice .hex-icon svg{width:45px;height:45px}
#servicios .ref-service-choice>span:last-child{max-width:135px;margin:auto;color:#e8ebf0;font:500 11px/1.3 Quedora,Arial,sans-serif;letter-spacing:.07em}
#servicios .ref-service-choice:hover>span:last-child,#servicios .ref-service-choice:focus-visible>span:last-child{color:var(--accent)}
#servicios .wedge{height:300px;background:linear-gradient(0deg,#27282b,#020304 90%)}

/* Las cinco fichas comparten la misma composición; cambia el color de cada servicio. */
.service-detail{font-family:Poppins,Arial,sans-serif;padding:16px 9% 65px}
.service-detail .ref-detail-top{margin-bottom:225px}
.service-detail .ref-detail-top h2{font:400 clamp(27px,2.8vw,38px)/1.2 Quedora,Arial,sans-serif;letter-spacing:.12em;margin-bottom:10px}
.service-detail .ref-detail-top>p{font:400 12.5px/1.5 Poppins,Arial,sans-serif}
.service-detail .ref-detail-top .ref-service-row{max-width:470px;gap:4px;margin-top:11px}
.service-detail .ref-detail-top .ref-service-choice>span:last-child{font:500 8px/1.13 Quedora,Arial,sans-serif;letter-spacing:.02em}
.service-detail .ref-detail-top .ref-service-choice .hex-icon{width:54px;height:62px;margin-bottom:8px}
.service-detail .ref-detail-top .ref-service-choice.selected .hex-icon{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--service-accent) 80%,transparent))}
.service-detail .ref-detail-peak{top:252px;height:250px;background:linear-gradient(180deg,color-mix(in srgb,var(--service-accent) 95%,#fff),color-mix(in srgb,var(--service-accent) 52%,#06162c) 38%,#000 98%)}
.service-detail .service-back{font:500 11px/1.4 Poppins,Arial,sans-serif}
.service-detail .service-hero{min-height:200px;align-items:start;gap:40px}
.service-detail .service-hero>div{padding-top:8px}
.service-detail .service-hero h1{font:400 clamp(25px,2.5vw,37px)/1.25 Quedora,Arial,sans-serif;letter-spacing:.09em}
.service-detail .service-hero .eyebrow{font:600 10px/1.4 Poppins,Arial,sans-serif;letter-spacing:.2em}
.service-detail .service-lead{font:400 12.5px/1.5 Poppins,Arial,sans-serif;max-width:560px}
.service-detail .service-hero .button{min-height:38px;padding:8px 17px;gap:7px;font:600 10.5px/1.2 Poppins,Arial,sans-serif}
.service-detail .service-hero .quote-icon{width:15px;height:15px;flex:none}
.service-detail .service-main-photo{position:relative;top:-40px;overflow:hidden;border-radius:12px}
.service-detail .service-main-photo img{width:100%;aspect-ratio:2.28;object-fit:cover;object-position:center}
.service-detail .service-benefits{margin:2px 0 40px}
.service-detail .service-benefits article{padding:13px 17px;border-color:#293a50;background:linear-gradient(120deg,color-mix(in srgb,var(--service-accent) 10%,#101722),#070a10 74%)}
.service-detail .service-benefits .service-number{font:600 13px/1.25 Poppins,Arial,sans-serif}
.service-detail .service-benefits h2{margin:6px 0 5px;font:600 14px/1.3 Poppins,Arial,sans-serif}
.service-detail .service-benefits p{font:400 10px/1.35 Poppins,Arial,sans-serif}
.service-detail .service-scope{gap:45px;padding:20px 0;margin-bottom:25px}
.service-detail .service-scope h2{font:500 clamp(15px,1.45vw,20px)/1.35 Poppins,Arial,sans-serif}
.service-detail .service-scope p,.service-detail .service-scope li{font-size:11px}
.service-detail .service-scope li{padding:3px 0 4px 8px}
.service-detail .service-examples{margin-top:25px}
.service-detail .ref-example-heading{margin-bottom:15px}
.service-detail .ref-example-heading h2,.service-detail .service-faq h2{font-family:Quedora,Arial,sans-serif;font-weight:500;letter-spacing:.045em;word-spacing:.2em}
.service-detail .ref-application-grid{gap:12px;grid-template-rows:165px 165px}
.service-detail .ref-application{border-color:color-mix(in srgb,var(--service-accent) 40%,#26364e)}
.service-detail .ref-application img{display:block}
.service-detail .ref-application .application-copy{margin:4px 0 7px;max-width:260px;color:#e2e6ec;font:400 10px/1.25 Poppins,Arial,sans-serif}
.service-detail .service-faq details{border-bottom:1px solid #172331}
.service-detail .service-faq summary{font-family:Poppins,Arial,sans-serif}

@media(max-width:900px){
 header .mega{width:min(850px,calc(100vw - 36px))}
 #servicios .ref-service-row{max-width:700px;gap:8px}
 #servicios .ref-service-choice .hex-icon{width:78px;height:90px}
 #servicios .ref-service-choice .hex-icon svg{width:40px;height:40px}
}
@media(max-width:760px){
 header nav .nav-services{width:100%;justify-content:space-between}
 header nav .nav-services a{flex:1}
 header nav .nav-services #services-toggle{width:42px;height:42px;flex:none;border:1px solid #26374c;border-radius:6px}
 header .mega{left:50%;right:auto;top:100%;width:100%;max-height:72vh;overflow-x:hidden;overflow-y:auto;padding:18px 16px 28px;min-height:0}
 header .mega:before{inset:0}
 header .mega:after{bottom:0}
 header .mega .ref-service-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 7px}
 header .mega .ref-service-choice:nth-child(even){transform:none}
 header .mega .hex-icon{width:62px;height:72px}
 header .mega .hex-icon svg{width:32px;height:32px}
 header .mega .ref-service-choice .mega-label{font-size:8.5px;letter-spacing:0}
 header .mega .mega-see-more{position:static;display:block;text-align:center;margin:20px auto 0}
 #servicios{padding-top:48px;padding-bottom:95px;min-height:730px}
 #servicios h1{font-size:clamp(26px,6vw,40px);letter-spacing:.08em}
 #servicios .ref-service-row{grid-template-columns:repeat(3,minmax(0,1fr));max-width:520px;gap:25px 8px;margin-top:55px}
 #servicios .ref-service-choice{grid-column:auto}
 #servicios .ref-service-choice:nth-child(4){grid-column:1/2;margin-left:50%}
 #servicios .ref-service-choice:nth-child(5){grid-column:3/4;margin-right:50%}
 #servicios .ref-service-choice>span:last-child{font-size:9px}
 #servicios .wedge{height:190px}
 .service-detail .ref-detail-top .ref-service-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:100%;gap:3px;padding:5px 0 14px;margin:25px auto 0}
 .service-detail .ref-detail-top .ref-service-choice{min-width:0;padding:0 1px}
 .service-detail .ref-detail-top .ref-service-choice .hex-icon{width:min(50px,13vw);height:58px}
 .service-detail .ref-detail-top .ref-service-choice>span:last-child{font-size:clamp(6px,1.8vw,8px);letter-spacing:0}
 .service-detail{padding:24px 5% 45px}
 .service-detail .ref-detail-top{margin-bottom:105px}
 .service-detail .ref-detail-peak{top:270px;height:210px}
 .service-detail .service-hero{min-height:0;align-items:stretch}
 .service-detail .service-hero>div{padding-top:0}
 .service-detail .service-main-photo{top:0}
 .service-detail .service-benefits{margin:28px 0}
 .service-detail .ref-application-grid{grid-template-rows:230px 170px}
 .service-detail .service-hero h1{font-size:clamp(23px,5vw,31px)}
}
@media(max-width:520px){
 #servicios .intro-copy{font-size:13px}
 #servicios .ref-service-choice .hex-icon{width:70px;height:82px}
 #servicios .ref-service-choice .hex-icon svg{width:36px;height:36px}
 .service-detail .ref-detail-top h2{font-size:24px;letter-spacing:.06em}
 .service-detail .ref-detail-top>p{font-size:12px}
 .service-detail .service-lead{font-size:13px}
 .service-detail .service-main-photo img{aspect-ratio:1.7}
}