/* Service cards: clear content below a colorful, individually illustrated cover. */
#servicios .sec__head{max-width:none;display:grid;grid-template-columns:1.15fr 1fr;column-gap:72px;align-items:end}
#servicios .sec__head>.eyebrow{grid-column:1/-1}
#servicios .sec__head .h2{max-width:19ch;font-size:clamp(2.3rem,3.8vw,4rem);line-height:1.12}
#servicios .sec__head .lead{max-width:43ch;margin:0 0 6px;line-height:1.65}
#servicios .cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:24px}
#servicios .service-visual{--service-bg:#082337;--service-accent:#91d9ff;position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;gap:18px;padding:238px 26px 28px;background:var(--service-bg);color:#fff;border:1px solid #ffffff30;overflow:hidden;border-radius:22px;box-shadow:0 16px 42px #07192f25}
#servicios .service-visual--correo{--service-bg:#072f36;--service-accent:#8ae8eb}
#servicios .service-visual--dominios{--service-bg:#251b42;--service-accent:#d4b7ff}
#servicios .service-visual--tiendas{--service-bg:#432419;--service-accent:#ffd0a1}
#servicios .service-visual--datos{--service-bg:#08362e;--service-accent:#92edc6}
#servicios .service-visual--seguridad{--service-bg:#0b2548;--service-accent:#9acfff}
#servicios .service-visual__art{position:absolute;inset:0 0 auto;height:240px;z-index:-1;overflow:hidden;pointer-events:none}
#servicios .service-visual__art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--service-bg) 100%)}
#servicios .service-visual__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .6s ease}
#servicios .service-visual:hover .service-visual__art img{transform:scale(1.045)}
#servicios .service-visual>.card__icon{position:absolute;top:179px;left:26px;width:32px;height:32px;padding:10px;box-sizing:content-box;color:var(--service-accent);background:var(--service-bg);border:1px solid #ffffff38;border-radius:14px}
#servicios .service-visual .h3{margin:0;color:#fff;font-size:1.55rem;letter-spacing:-.025em}
#servicios .service-visual .body{margin:0;color:#dce7ed;font-size:.96rem;line-height:1.7}
#servicios .service-visual__points{list-style:none;display:grid;gap:11px;margin:0 0 6px;padding:18px 0 0;border-top:1px solid #ffffff26;color:#e4edf2}
#servicios .service-visual__points li{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;line-height:1.55}
#servicios .service-visual__points svg{flex:none;width:15px;height:15px;margin-top:3px;color:var(--service-accent)}
#servicios .service-visual>.tlink{margin-top:auto;padding-top:6px;color:var(--service-accent);font-size:.95rem}
#servicios .service-visual a:focus-visible{outline:2px solid var(--service-accent);outline-offset:5px;border-radius:3px}
@media(max-width:1100px){#servicios .cards{grid-template-columns:repeat(2,minmax(0,1fr))}#servicios .sec__head{gap:24px 36px}}
@media(max-width:700px){#servicios .sec__head{display:block}#servicios .sec__head .lead{margin-top:24px}#servicios .cards{grid-template-columns:1fr}#servicios .service-visual{padding-inline:25px}#servicios .service-visual__art{height:250px}#servicios .service-visual .body{font-size:1rem}}
@media(prefers-reduced-motion:reduce){#servicios .service-visual__art img{transition:none}#servicios .service-visual:hover .service-visual__art img{transform:none}}
/* Realistic artwork stays fully visible so logos and domain names are not cropped. */
#servicios .service-visual{padding:0 26px 28px;gap:18px}
#servicios .service-visual__art{position:relative;inset:auto;flex:none;width:calc(100% + 52px);height:auto;aspect-ratio:3/2;margin:0 -26px;z-index:0}
#servicios .service-visual__art:after{background:linear-gradient(180deg,transparent 78%,var(--service-bg) 100%)}
#servicios .service-visual__art img{height:100%;object-fit:contain;object-position:center}
#servicios .service-visual:hover .service-visual__art img{transform:none;filter:brightness(1.04)}
#servicios .service-visual>.card__icon{position:relative;z-index:1;top:auto;left:auto;margin-top:-44px}
.service-visual__platform-label{display:block;font:500 .62rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#a9c1cf;margin-bottom:9px}
.service-visual__badges{display:flex;flex-wrap:wrap;gap:6px}
.service-visual__badges span{font-size:.7rem;line-height:1.4;padding:5px 8px;border:1px solid #ffffff30;border-radius:6px;background:#ffffff0a;color:var(--service-accent)}
@media(max-width:700px){#servicios .service-visual{padding-inline:25px}#servicios .service-visual__art{width:calc(100% + 50px);margin-inline:-25px;height:auto}}