/* Introducción: SVG entregado para esta pantalla; el logo oficial animado se usa después. */
.intro{position:fixed;inset:0;z-index:1000;background:#fff;display:grid;place-items:center;overflow:auto;transition:background 1s ease,opacity .5s ease,visibility .5s ease}
.intro.navy{background:#0c365b}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
.intro-content{width:min(91vw,900px);display:grid;justify-items:center;align-content:center;padding:30px 0}
.intro-art{width:min(86vw,780px);aspect-ratio:17201 / 7776.8;display:grid;place-items:center}
.intro-art svg,.intro-art img{width:100%;height:100%;object-fit:contain;overflow:visible}
.intro-art svg #intro-mesh{opacity:0;clip-path:polygon(0 0,7% 0,0 15%,0 0)}
.intro-art svg #intro-mesh.reveal{opacity:1;animation:intro-weave 1.8s cubic-bezier(.25,.05,.2,1) both}
@keyframes intro-weave{0%{clip-path:polygon(0 0,7% 0,0 15%,0 0)}24%{clip-path:polygon(0 0,41% 0,22% 36%,0 60%)}58%{clip-path:polygon(0 0,78% 0,56% 69%,0 100%)}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
.intro-art svg #V_Azul,.intro-art svg #V_Verde{opacity:0;transform:scale(.96);transform-box:fill-box;transform-origin:center;transition:opacity .46s ease,transform .46s ease}
.intro-art svg #V_Azul.reveal,.intro-art svg #V_Verde.reveal{opacity:1;transform:scale(1)}
.intro-art svg #V_Gris{opacity:0;transform:translateY(-430px);transition:opacity .54s ease,transform .54s cubic-bezier(.18,.75,.25,1)}
.intro-art svg #V_Gris.reveal{opacity:1;transform:translateY(0)}
.intro-art svg #L,.intro-art svg #L_Sombra,.intro-art svg #E,.intro-art svg #A,.intro-art svg #R,.intro-art svg #N{opacity:0;transform:translateX(-230px);transition:opacity .32s ease,transform .36s ease}
.intro-art svg #L.reveal,.intro-art svg #L_Sombra.reveal,.intro-art svg #E.reveal,.intro-art svg #A.reveal,.intro-art svg #R.reveal,.intro-art svg #N.reveal{opacity:1;transform:translateX(0)}
.intro-art svg #Linea,.intro-art svg #Linea_Sombra{clip-path:inset(0 100% 0 0);transition:clip-path .65s ease}
.intro-art svg #Linea.reveal,.intro-art svg #Linea_Sombra.reveal{clip-path:inset(0)}
.intro-art svg #intro-slogan{opacity:0;transform:translateY(260px);transition:opacity .75s ease,transform .75s ease}
.intro-art svg #intro-slogan.reveal{opacity:1;transform:translateY(0)}
.intro-welcome{margin-top:20px;text-align:center;opacity:0;transform:translateY(22px);visibility:hidden;transition:opacity .55s ease,transform .55s ease,visibility .55s ease}
.intro.welcome-ready .intro-welcome{opacity:1;transform:translateY(0);visibility:visible}
.intro-welcome h2{font-family:"Poppins",sans-serif;color:#fff;font-size:clamp(26px,4vw,42px);font-weight:600;margin:0 0 18px}
.intro-start{border:1px solid #a7e9d2;border-radius:12px;padding:14px 30px;background:#68b953;color:#0b2941;font:700 15px "Poppins",sans-serif;cursor:pointer;box-shadow:0 12px 28px #031e3740}
.intro-start:hover,.intro-start:focus-visible{background:#8cda71;transform:translateY(-2px);outline:3px solid #fff;outline-offset:3px}
.intro-start:disabled{opacity:.65;cursor:progress}
.intro-running .topbar,.intro-running main,.intro-running .skip{visibility:hidden}
.install-hero{margin-bottom:22px}.install-hero .overline{color:#2783aa}.install-hero h1{font-size:clamp(29px,4vw,44px);line-height:1.13;margin:8px 0 13px;color:#123b61}.install-hero p{font-size:15px;line-height:1.7;color:#315e77}
.install-meter{height:16px;border-radius:999px;background:#d7e9ef;overflow:hidden;margin:22px 0 8px}
.install-meter>span{display:block;height:100%;width:0;background:#28b987;border-radius:inherit;transition:width .36s ease,background .3s}
.install-meter.is-warning>span{background:#e8b13c}
.install-checks{display:grid;gap:8px;margin:18px 0}.install-check{display:flex;align-items:flex-start;gap:12px;border-radius:12px;border:1px solid #d6e8ee;background:#f7fbfd;padding:12px 14px;color:#24526b;font-size:13px}.install-check b{color:#0b8a69}.install-check.warn{border-color:#f0d993;background:#fff9e9}.install-check.warn b{color:#9a680b}.install-check p{margin:3px 0 0;font-size:12px}
.install-next{margin:20px 0;font-size:17px!important;font-weight:700;color:#08775e!important}
.install-actions{display:flex;gap:10px;flex-wrap:wrap}
body:has(.install-hero) main{padding-top:clamp(24px,5vw,65px)}
.secure-shell:has(.install-hero)>.welcome{display:none}.secure-shell:has(.install-hero){max-width:960px}
.secure-shell:has(.install-hero) .secure-card{border-radius:24px;padding:clamp(28px,5vw,58px)}
@media(max-width:600px){.intro-content{padding:28px 0}.intro-art{width:95vw}.intro-welcome{margin-top:26px}}
@media(prefers-reduced-motion:reduce){.intro,.intro *{animation-duration:.01ms!important;transition-duration:.01ms!important}}