/* MAGNA COMPUTACIÓN — V19.8.1 | Ajustes visuales de infraestructura.
   Páginas específicas: índice de infraestructura, SSL, WordPress Hosting.
   Respeta los estilos de base, las conversiones y los formularios existentes. */

/* 01 · Portada: una composición visual real, sin chips aislados */
body.infra-page .infra-home-hero-v1981{background:radial-gradient(circle at 79% 51%,#cee2ff 0%,#e7f2ff 24%,transparent 52%),linear-gradient(120deg,#fff 8%,#f6faff 56%,#edf6ff 100%);padding-block:clamp(40px,5vw,68px)!important}
body.infra-page .infra-home-hero-v1981 .infra-hero-grid{grid-template-columns:minmax(0,1.01fr) minmax(0,.99fr);gap:clamp(26px,4.2vw,68px)}
body.infra-page .infra-home-hero-v1981 h1{font-size:clamp(41px,4.05vw,59px);max-width:680px;line-height:1.095;margin-bottom:19px}
body.infra-page .infra-home-hero-v1981 .infra-headline-strong{font-size:.81em;line-height:1.18;margin-top:14px}
body.infra-page .infra-home-hero-v1981 .infra-intro{max-width:530px}
body.infra-page .infra-home-hero-v1981 .infra-trust{margin-top:22px}
.infra-overview-stage{position:relative;isolation:isolate;display:grid;place-items:center;min-height:425px;padding:32px 13px 25px;min-width:0}
.infra-overview-stage::before{content:"";position:absolute;z-index:-2;inset:0;border-radius:48%;background:radial-gradient(circle,#acd2ff99 0%,#deedff96 48%,transparent 72%)}
.infra-overview-stage-main{width:min(100%,540px);position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#071c3c,#0b3672 57%,#1559ae);border:1px solid #3379ca80;border-radius:23px;box-shadow:0 34px 75px #082b6643,0 7px 18px #17498a26;transform:rotate(-2deg);padding:19px 20px 21px}
.infra-overview-stage-main::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 47% 55%,#218aff50,transparent 52%);pointer-events:none}
.infra-stage-head{display:flex;align-items:center;gap:9px;color:#c5dbff;letter-spacing:.11em;font-size:9px;font-weight:850;border-bottom:1px solid #b0d8ff30;padding-bottom:13px;white-space:nowrap}
.infra-stage-led{height:9px;width:9px;border-radius:50%;background:#5ae1c4;box-shadow:0 0 0 4px #5ae1c41e}
.infra-stage-status{margin-left:auto;color:#85baff;font-size:8px;letter-spacing:.09em}
.infra-stage-cloud{width:100%;height:286px;object-fit:contain;display:block;filter:drop-shadow(0 16px 12px #0312265e)}
.infra-stage-footer{border-top:1px solid #b0d8ff30;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.infra-stage-footer strong{font-size:15px;letter-spacing:-.02em;color:#fff;line-height:1.2}
.infra-stage-footer span{font-size:9px;letter-spacing:.1em;font-weight:760;color:#9bc9ff}
.infra-stage-float{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid #d5e7ff;border-radius:14px;box-shadow:0 17px 35px #103c7a30;max-width:220px;line-height:1.15}
.infra-stage-float strong{display:block;color:#113e7d;font-size:13px;font-weight:850}
.infra-stage-float small{display:block;color:#547495;font-size:10px;margin-top:5px}
.infra-stage-icon{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;background:#e5f1ff;color:#1c5dcc;font-weight:900;border-radius:10px;font-size:20px}
.infra-stage-email{left:-23px;bottom:39px;transform:rotate(2deg)}
.infra-stage-ssl{right:-23px;top:53px;transform:rotate(3deg)}
.infra-stage-ssl .infra-stage-icon{background:#e4f8ee;color:#11805a}
.infra-stage-corner{position:absolute;z-index:-1;inset:26px -2px;border-radius:46%;border:1px solid #78adf744;transform:rotate(12deg)}
body.infra-page .infra-home-hero-v1981 + .infra-section{padding-top:clamp(43px,4.4vw,62px)!important}

/* 02 · SSL: tres beneficios equilibrados y una CTA contextual */
body.infra-page .infra-main .infra-ssl-hero-v1981{padding-block:clamp(40px,4vw,60px)!important}
body.infra-page .infra-ssl-hero-v1981 .infra-visual-ssl-ejemplo{box-shadow:0 22px 56px #184b842b;transform:rotate(-.7deg)}
body.infra-page .infra-ssl-hero-v1981 .infra-visual-ssl-ejemplo>img{max-height:385px;object-fit:contain}
body.infra-page .infra-main .infra-ssl-reassurance{background:linear-gradient(145deg,#e9f4ff,#f6faff 42%,#eff6ff);padding:clamp(43px,4.6vw,68px) 0!important;border-block:1px solid #d9e8f8}
.infra-ssl-lead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:28px;max-width:none;margin-bottom:25px!important}
body.infra-page .infra-main .infra-ssl-lead h2{max-width:650px;font-size:clamp(30px,3vw,43px);margin:12px 0 0}
body.infra-page .infra-main .infra-ssl-lead p{max-width:410px;font-size:14px;line-height:1.7;margin-bottom:2px}
.infra-ssl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.infra-ssl-card{position:relative;min-width:0;display:flex;flex-direction:column;min-height:228px;padding:25px 23px 20px;border-radius:18px;background:#fff;border:1px solid #cfdef2;box-shadow:0 12px 35px #174c8813;transition:transform .2s,border-color .2s,box-shadow .2s}
.infra-ssl-card:hover{transform:translateY(-3px);border-color:#8dbafa;box-shadow:0 19px 38px #16488523}
.infra-ssl-icon{min-width:52px;align-self:flex-start;display:grid;place-items:center;height:45px;padding:0 10px;background:#e7f2ff;border-radius:13px;color:#205ac0;font-size:13px;font-weight:900;letter-spacing:-.025em;margin-bottom:17px}
.infra-ssl-icon-domain{font-size:26px;background:#e9f8f5;color:#167d74}
.infra-ssl-icon-renew{font-size:24px;background:#eff0ff;color:#4a57b2}
body.infra-page .infra-main .infra-ssl-card h3{color:#123969!important;font-size:20px;line-height:1.23;margin:0 0 8px}
body.infra-page .infra-main .infra-ssl-card p{color:#4d6985!important;font-size:13px;line-height:1.6;flex:1;margin:0}
.infra-ssl-foot{display:block;border-top:1px solid #e4eef9;margin-top:18px;padding-top:13px;color:#2c63b2;font-weight:850;letter-spacing:.07em;font-size:9px}
.infra-ssl-bridge{background:linear-gradient(110deg,#123b79,#1956ad);color:#fff;border-radius:17px;padding:19px 22px;margin-top:19px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 14px 31px #0e44842b}
.infra-ssl-bridge strong{display:block;color:#fff;font-size:18px;font-weight:850}
.infra-ssl-bridge span{display:block;color:#d6eaff;font-size:12px;line-height:1.5;margin-top:3px}
body.infra-page .infra-main .infra-ssl-bridge a.infra-btn{background:#fff!important;color:#1550ab!important;border:0!important;box-shadow:none;white-space:nowrap;min-height:42px}
body.infra-page .infra-main .infra-ssl-bridge a.infra-btn:hover{background:#e9f4ff!important;color:#0e3b84!important}

/* 03 · WordPress: proceso editorial conectado y FAQ destacado */
body.infra-page .infra-main .infra-wp-journey{padding:clamp(46px,5vw,74px) 0!important;background:radial-gradient(circle at 89% 26%,#bed7ff80,transparent 40%),linear-gradient(118deg,#eaf3ff,#dceaff 64%,#eef6ff);border-block:1px solid #c7dcf8}
.infra-wp-journey-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);align-items:center;gap:clamp(32px,5vw,70px)}
body.infra-page .infra-main .infra-wp-journey-content h2{font-size:clamp(31px,3.15vw,45px);line-height:1.14;margin:13px 0 17px;max-width:580px;color:#103b71!important}
body.infra-page .infra-main .infra-wp-journey-intro{font-size:14px;color:#456788!important;line-height:1.7;max-width:515px;margin-bottom:24px}
.infra-wp-process{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:530px}
.infra-wp-process li{position:relative;display:flex;gap:16px;padding:0 0 19px;min-height:67px}
.infra-wp-process li:last-child{padding-bottom:0}
.infra-wp-process li:not(:last-child)::after{content:"";position:absolute;top:38px;bottom:1px;left:17px;width:2px;background:#a9c9f2}
.infra-wp-step-num{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:#1555bb;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900;box-shadow:0 5px 14px #174d932b}
.infra-wp-process strong{display:block;font-size:17px;font-weight:850;color:#113b74;line-height:1.2;margin:1px 0 5px}
.infra-wp-process small{display:block;font-size:12px;color:#4c6d8c;line-height:1.55}
body.infra-page .infra-main .infra-wp-action{margin-top:23px}
.infra-wp-journey-visual{position:relative;isolation:isolate;padding:13px 13px 0;border-radius:21px;background:#0c2857;border:1px solid #3f78c6;box-shadow:0 30px 66px #153d753f;transform:rotate(1.5deg)}
.infra-wp-journey-visual::before{content:"";position:absolute;inset:-24px;z-index:-1;border-radius:50%;background:radial-gradient(circle,#accfff9b,transparent 67%)}
.infra-wp-window-bar{display:flex;gap:5px;align-items:center;padding:1px 5px 12px}
.infra-wp-window-bar>span{height:8px;width:8px;border-radius:50%;background:#f58d82}.infra-wp-window-bar>span:nth-child(2){background:#f4ce6d}.infra-wp-window-bar>span:nth-child(3){background:#5ac49c}
.infra-wp-window-bar small{margin-left:auto;color:#afd0fd;letter-spacing:.14em;font-size:9px;font-weight:800}
.infra-wp-journey-visual img{width:100%;height:260px;object-fit:contain;display:block;background:#152e58;border-radius:11px 11px 0 0}
.infra-wp-visual-caption{background:#0c2857;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 10px 17px;flex-wrap:wrap}
.infra-wp-visual-caption span{font-weight:850;color:#a1c9ff;font-size:9px;letter-spacing:.12em}
.infra-wp-visual-caption strong{font-size:14px;color:#fff}
body.infra-page .infra-main .infra-wp-faq-v1981{background:linear-gradient(120deg,#12386f,#0b2651);border-top:3px solid #4e99f3;padding:clamp(42px,4vw,62px) 0!important}
body.infra-page .infra-main .infra-wp-faq-v1981 h2{color:#fff!important;font-size:clamp(30px,3.1vw,42px)}
body.infra-page .infra-main .infra-wp-faq-v1981 .infra-eyebrow{color:#b2d4ff!important}
body.infra-page .infra-main .infra-wp-faq-v1981 .infra-two-col>div>p{color:#c2dafa!important}
.infra-wp-faq-v1981 .infra-faqs{background:#f8fbff;border:1px solid #bad2f5;border-radius:18px;padding:4px 22px;box-shadow:0 17px 31px #051a3d37}
.infra-wp-faq-v1981 .infra-faq{border-bottom:1px solid #d9e8f8}
.infra-wp-faq-v1981 .infra-faq:last-child{border-bottom:0}
.infra-wp-faq-v1981 .infra-faq summary{color:#133963;padding:18px 0}
.infra-wp-faq-v1981 .infra-faq[open] summary{color:#1454b6}
.infra-wp-faq-v1981 .infra-faq p{color:#425f7e!important}

/* Responsive and accessibility rules */
@media(max-width:980px){
 body.infra-page .infra-home-hero-v1981 .infra-hero-grid{gap:21px}
 .infra-overview-stage{min-height:355px}
 .infra-stage-cloud{height:235px}
 .infra-stage-email{left:-7px;bottom:10px}
 .infra-stage-ssl{right:-7px;top:20px}
 .infra-wp-journey-grid{gap:25px}
 .infra-wp-journey-visual img{height:216px}
}
@media(max-width:700px){
 body.infra-page .infra-home-hero-v1981 .infra-hero-grid,.infra-wp-journey-grid,.infra-ssl-lead{grid-template-columns:1fr}
 body.infra-page .infra-home-hero-v1981 h1{font-size:clamp(37px,8.2vw,49px)}
 .infra-overview-stage{min-height:340px;padding:22px 15px 29px;margin:5px auto 0;max-width:490px}
 .infra-overview-stage-main{padding:13px 15px;border-radius:18px;transform:rotate(-1deg)}
 .infra-stage-cloud{height:230px}
 .infra-stage-email{left:-2px;bottom:0}
 .infra-stage-ssl{right:-2px;top:18px}
 .infra-stage-float{padding:9px 10px;gap:8px}
 .infra-stage-icon{height:30px;width:30px;flex-basis:30px;font-size:15px}
 .infra-stage-float strong{font-size:11px}
 .infra-stage-float small{font-size:9px}
 .infra-ssl-grid{grid-template-columns:1fr;gap:11px}
 .infra-ssl-card{min-height:0;padding:20px 19px}
 .infra-ssl-bridge{align-items:flex-start;flex-direction:column}
 .infra-wp-journey-visual{max-width:520px;margin:auto;width:100%;box-sizing:border-box}
 .infra-wp-journey-visual img{height:240px}
 .infra-wp-faq-v1981 .infra-faqs{padding:4px 17px}
}
@media(min-width:550px) and (max-width:700px){.infra-ssl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.infra-ssl-card{padding:14px;}.infra-ssl-card h3{font-size:15px!important}}
@media(max-width:390px){
 .infra-stage-status{display:none}
 .infra-stage-cloud{height:194px}
 .infra-overview-stage{min-height:295px}
 .infra-stage-float{max-width:165px}
 .infra-stage-footer strong{font-size:12px}
 .infra-stage-footer span{font-size:8px}
 .infra-wp-journey-visual img{height:195px}
 .infra-ssl-bridge .infra-btn{width:100%;white-space:normal!important}
}
@media(prefers-reduced-motion:reduce){.infra-ssl-card{transition:none}.infra-ssl-card:hover{transform:none}}
/* Evitar desplazamiento lateral por la rotación editorial del mockup en pantallas estrechas. */
body.infra-page .infra-main .infra-wp-journey{overflow-x:clip}