/* Extraído de index.html (bloque de estilo #3) */
        @keyframes spl-spin  { to { transform: rotate(360deg);  } }
        @keyframes spl-spin2 { to { transform: rotate(-360deg); } }
        @keyframes spl-scan {
            0%, 12% { transform: translateX(-125%); opacity: 0; }
            22% { opacity: .9; }
            62% { opacity: .5; }
            78%, 100% { transform: translateX(125%); opacity: 0; }
        }
        @keyframes spl-breathe {
            0%, 100% { transform: scale(.96); opacity: .42; }
            50% { transform: scale(1.04); opacity: .78; }
        }
        @keyframes spl-pulse-glow {
            0%,100% { opacity:.35; transform:scale(1);    }
            50%      { opacity:.75; transform:scale(1.07); }
        }
        @keyframes spl-bar-sweep {
            0%   { transform:translateX(-100%); width:30%; }
            50%  {                               width:55%; }
            100% { transform:translateX(340%);  width:30%; }
        }
        @keyframes spl-shimmer {
            0%   { background-position:-220% center; }
            100% { background-position: 220% center; }
        }
        @keyframes spl-dot-pulse {
            0%,80%,100% { transform:scale(.55); opacity:.35; }
            40%          { transform:scale(1);   opacity:1;   }
        }
        @keyframes spl-fade-up {
            from { opacity:0; transform:translateY(14px); }
            to   { opacity:1; transform:translateY(0);    }
        }

        /* ── Root container ── */
        #startup-indicator {
            position: fixed;
            inset: 0;
            background:
                radial-gradient(circle at 50% 45%, rgba(31, 106, 255, .17), transparent 28%),
                radial-gradient(circle at 50% 54%, rgba(0, 220, 255, .08), transparent 42%),
                linear-gradient(145deg, #071126 0%, #0b1530 52%, #10153a 100%);
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Inter','SF Pro Display',-apple-system,sans-serif;
            overflow: hidden;
            transition: opacity .75s cubic-bezier(.4,0,.2,1);
        }
        #startup-indicator::before {
            content: '';
            position: absolute;
            width: min(760px, 100vw);
            aspect-ratio: 1;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: repeating-radial-gradient(circle, transparent 0 58px, rgba(86, 154, 255, .055) 59px 60px);
            mask-image: radial-gradient(circle, #000 12%, transparent 68%);
            pointer-events: none;
        }
        #startup-indicator.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        #startup-indicator.fade-out .spl-card {
            transform: scale(1.05) translateY(-10px);
            filter: blur(10px);
        }

        /* ── Particle canvas ── */
        #splash-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }

        /* ── Center card ── */
        .spl-card {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform .75s cubic-bezier(.4,0,.2,1), filter .75s ease;
            isolation: isolate;
            width: min(620px, 92vw);
        }

        .spl-kicker {
            display: flex;
            align-items: center;
            gap: 9px;
            color: rgba(188, 211, 241, .64);
            font-size: .55rem;
            font-weight: 700;
            letter-spacing: 3.3px;
            margin-bottom: 15px;
            animation: spl-fade-up .45s both;
        }
        .spl-kicker span {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #43e6ff;
            box-shadow: 0 0 0 4px rgba(67, 230, 255, .1), 0 0 14px #43e6ff;
        }

        /* ── Logo + rings ── */
        .spl-logo-wrap {
            position: relative;
            width: min(470px, 84vw);
            height: 172px;
            display: grid;
            place-items: center;
            margin-bottom: 16px;
            cursor: pointer;
            animation: spl-fade-up .6s .05s both;
        }
        .spl-logo-wrap::before {
            content: '';
            position: absolute;
            inset: 12px -34px;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(44, 182, 255, .16), rgba(90, 71, 255, .05) 46%, transparent 72%);
            filter: blur(8px);
            z-index: -2;
            animation: spl-breathe 3.4s ease-in-out infinite;
        }
        .spl-logo-wrap::after {
            content: '';
            position: absolute;
            top: 18px;
            bottom: 18px;
            width: 32%;
            left: 34%;
            z-index: 3;
            pointer-events: none;
            background: linear-gradient(90deg, transparent, rgba(92, 224, 255, .22), rgba(255,255,255,.48), transparent);
            filter: blur(1px);
            transform: translateX(-125%);
            animation: spl-scan 3.2s cubic-bezier(.3,.05,.3,1) infinite;
            mix-blend-mode: screen;
        }
        .spl-ring-outer {
            position: absolute;
            inset: 3px -42px;
            border-radius: 50%;
            border: 1px solid rgba(98, 180, 255, .3);
            box-shadow: inset 0 0 34px rgba(72, 99, 255, .08), 0 0 36px rgba(29, 155, 255, .08);
            z-index: -1;
            animation: spl-breathe 4s ease-in-out infinite;
        }
        .spl-ring-spin {
            position: absolute;
            inset: 24px -16px;
            border-radius: 50%;
            border: 1px solid rgba(111, 93, 255, .32);
            z-index: -1;
            animation: spl-breathe 3.2s .35s ease-in-out infinite reverse;
        }
        .spl-ring-spin2 {
            position: absolute;
            left: 50%;
            top: -12px;
            width: 1px;
            height: 196px;
            background: linear-gradient(transparent, rgba(56,189,248,.58), transparent);
            box-shadow: 0 0 14px rgba(56,189,248,.5);
            z-index: -1;
            animation: spl-pulse-glow 2.6s ease-in-out infinite;
        }
        .spl-focus-corners {
            position: absolute;
            inset: 21px -2px;
            z-index: 4;
            pointer-events: none;
            background:
                linear-gradient(#43e6ff, #43e6ff) left top / 28px 2px no-repeat,
                linear-gradient(#43e6ff, #43e6ff) left top / 2px 18px no-repeat,
                linear-gradient(#6977ff, #6977ff) right top / 28px 2px no-repeat,
                linear-gradient(#6977ff, #6977ff) right top / 2px 18px no-repeat,
                linear-gradient(#6977ff, #6977ff) left bottom / 28px 2px no-repeat,
                linear-gradient(#6977ff, #6977ff) left bottom / 2px 18px no-repeat,
                linear-gradient(#43e6ff, #43e6ff) right bottom / 28px 2px no-repeat,
                linear-gradient(#43e6ff, #43e6ff) right bottom / 2px 18px no-repeat;
            opacity: .72;
            filter: drop-shadow(0 0 8px rgba(67,230,255,.38));
        }
        #splash-logo-img {
            display: block;
            max-width: min(410px, 76vw);
            max-height: 106px;
            width: auto;
            height: auto;
            min-width: 80px;
            border-radius: 24px;
            position: relative;
            z-index: 2;
            object-fit: contain;
            filter: saturate(1.13) contrast(1.05) drop-shadow(0 18px 34px rgba(1, 8, 30, .38));
            border: 1px solid rgba(255,255,255,.8);
        }

        /* ── Brand text ── */
        .spl-brand {
            font-size: .6rem;
            font-weight: 800;
            letter-spacing: 5px;
            text-transform: uppercase;
            background: linear-gradient(90deg,
                rgba(255,255,255,.3) 0%,
                rgba(255,255,255,.92) 45%,
                rgba(255,255,255,.3) 90%);
            background-size: 220% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: spl-shimmer 3.2s linear infinite, spl-fade-up .6s .25s both;
            display: none;
        }
        .spl-tagline {
            font-size: .68rem;
            font-weight: 500;
            color: rgba(185,205,232,.72);
            letter-spacing: 2.4px;
            text-transform: uppercase;
            margin-bottom: 25px;
            animation: spl-fade-up .6s .4s both;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .spl-tagline i {
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #43e6ff;
            box-shadow: 0 0 8px #43e6ff;
        }

        @media (prefers-reduced-motion: reduce) {
            .spl-logo-wrap::after,
            .spl-logo-wrap::before,
            .spl-ring-outer,
            .spl-ring-spin,
            .spl-ring-spin2 { animation: none !important; }
        }

        /* ── Loader bar + dots ── */
        .spl-loader-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            animation: spl-fade-up .6s .6s both;
            width: min(320px, 76vw);
            padding: 12px 14px 10px;
            border: 1px solid rgba(133, 175, 235, .13);
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
            box-shadow: inset 0 1px rgba(255,255,255,.05);
            backdrop-filter: blur(12px);
        }
        .spl-load-head {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .spl-track {
            width: 100%;
            height: 3px;
            background: rgba(255,255,255,.07);
            border-radius: 99px;
            overflow: hidden;
        }
        .spl-bar {
            height: 100%;
            width: 40%;
            background: linear-gradient(90deg, #6475ff, #43e6ff, #ffffff);
            border-radius: 99px;
            animation: spl-bar-sweep 1.7s ease-in-out infinite;
            box-shadow: 0 0 10px rgba(99,102,241,.7);
        }
        .spl-ai-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: .5rem;
            font-weight: 800;
            letter-spacing: 1.5px;
            color: #8eeeff;
        }
        .spl-ai-badge span {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #39edb2;
            box-shadow: 0 0 8px #39edb2;
        }
        .spl-load-scale {
            width: 100%;
            display: flex;
            justify-content: space-between;
            opacity: .25;
        }
        .spl-load-scale span { width: 1px; height: 4px; background: #a9c8ee; }
        .spl-dots {
            display: flex;
            gap: 5px;
            align-items: center;
        }
        .spl-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(99,102,241,.9);
            animation: spl-dot-pulse 1.4s ease-in-out infinite;
        }
        .spl-dot:nth-child(1) { animation-delay: 0s;    }
        .spl-dot:nth-child(2) { animation-delay: .18s;  }
        .spl-dot:nth-child(3) { animation-delay: .36s;  }
        #splash-status-text {
            font-size: .58rem;
            font-weight: 700;
            letter-spacing: 2.8px;
            text-transform: uppercase;
            color: rgba(190,210,236,.62);
        }

        @media (max-width: 520px) {
            .spl-logo-wrap { height: 146px; }
            .spl-focus-corners { inset: 17px 5px; }
            .spl-tagline { font-size: .56rem; letter-spacing: 1.5px; gap: 8px; }
            .spl-kicker { font-size: .48rem; letter-spacing: 2.4px; }
        }

        /* Firma óptica: el emblema enfoca y el nombre se escribe letra a letra. */
        @keyframes spl-letter-write {
            0% { opacity: 0; transform: translateY(9px) scale(.86); filter: blur(5px); }
            58% { opacity: 1; filter: blur(0); }
            100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
        }
        @keyframes spl-lens-open {
            0% { opacity: 0; transform: scale(.55) rotate(-14deg); filter: blur(10px); }
            65% { opacity: 1; transform: scale(1.06) rotate(2deg); filter: blur(0); }
            100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); }
        }
        @keyframes spl-caret-travel {
            0%, 7% { left: 0; opacity: 0; }
            12% { opacity: 1; }
            78% { left: calc(100% - 2px); opacity: 1; }
            88%, 100% { left: calc(100% - 2px); opacity: 0; }
        }
        @keyframes spl-aurora-drift {
            0%,100% { transform: translate3d(-4%, -2%, 0) rotate(-7deg) scale(1); }
            50% { transform: translate3d(5%, 3%, 0) rotate(5deg) scale(1.08); }
        }
        #startup-indicator {
            background:
                radial-gradient(ellipse at 18% 18%, rgba(20, 196, 255, .16), transparent 36%),
                radial-gradient(ellipse at 82% 72%, rgba(112, 70, 255, .18), transparent 38%),
                linear-gradient(135deg, #061426 0%, #08213a 46%, #11163d 100%);
        }
        #startup-indicator::before {
            width: 78vw;
            max-width: 1100px;
            background:
                conic-gradient(from 210deg at 50% 50%, transparent, rgba(47,221,255,.12), transparent 28%, rgba(114,79,255,.13), transparent 58%);
            mask-image: radial-gradient(ellipse, #000 5%, transparent 68%);
            filter: blur(30px);
            animation: spl-aurora-drift 8s ease-in-out infinite;
        }
        #startup-indicator::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: .18;
            background-image:
                linear-gradient(rgba(113,194,255,.11) 1px, transparent 1px),
                linear-gradient(90deg, rgba(113,194,255,.11) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: radial-gradient(ellipse at center, #000, transparent 66%);
            transform: perspective(650px) rotateX(63deg) scale(1.35) translateY(28%);
            transform-origin: center bottom;
        }
        #splash-canvas { opacity: .42; mix-blend-mode: screen; }
        .spl-card { width: min(760px, 94vw); }
        .spl-signature {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(13px, 2.5vw, 24px);
            min-height: 154px;
            cursor: pointer;
        }
        .spl-signature .spl-logo-wrap {
            width: clamp(82px, 11vw, 118px);
            height: clamp(82px, 11vw, 118px);
            margin: 0;
            flex: 0 0 auto;
            animation: spl-lens-open .9s cubic-bezier(.16,1,.3,1) both;
        }
        .spl-signature .spl-logo-wrap::before {
            inset: -24%;
            background: radial-gradient(circle, rgba(48,218,255,.28), rgba(92,70,255,.12) 42%, transparent 69%);
        }
        .spl-signature .spl-logo-wrap::after { display: none; }
        .spl-signature .spl-ring-outer { inset: -13px; border-radius: 31%; }
        .spl-signature .spl-ring-spin { inset: -6px; border-radius: 28%; }
        .spl-signature .spl-ring-spin2 {
            left: -18px; top: 50%; width: calc(100% + 36px); height: 1px;
            background: linear-gradient(90deg, transparent, #42ddff, transparent);
        }
        .spl-signature #splash-logo-img {
            width: 100%; height: 100%; max-width: none; max-height: none; min-width: 0;
            padding: 0; border: 0; border-radius: 22px;
            filter: saturate(1.14) drop-shadow(0 16px 28px rgba(5,13,40,.5));
        }
        .spl-wordmark {
            position: relative;
            display: flex;
            align-items: baseline;
            padding: 8px 5px 10px 0;
            font-family: 'Inter','SF Pro Display',Arial,sans-serif;
            font-size: clamp(2rem, 6.2vw, 4.15rem);
            line-height: 1;
            font-weight: 760;
            letter-spacing: clamp(-3px, -.18vw, -1px);
            white-space: nowrap;
        }
        .spl-wordmark span {
            display: inline-block;
            opacity: 0;
            color: #52d9ff;
            text-shadow: 0 0 24px rgba(47,198,255,.28);
            animation: spl-letter-write .42s cubic-bezier(.16,1,.3,1) forwards;
            animation-delay: calc(.34s + var(--i) * .085s);
        }
        .spl-wordmark span:nth-child(-n+7) {
            background: linear-gradient(180deg, #61e5ff, #3689ff);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }
        .spl-wordmark .spl-soft { color: #f5f8ff; text-shadow: 0 0 26px rgba(255,255,255,.12); }
        .spl-wordmark > i {
            position: absolute;
            top: 4px; bottom: 5px; width: 2px; left: 0;
            border-radius: 2px;
            background: linear-gradient(transparent, #62e9ff 18%, #fff 52%, #6e78ff 82%, transparent);
            box-shadow: 0 0 15px #51dfff;
            animation: spl-caret-travel 1.75s .18s cubic-bezier(.34,.06,.2,1) both;
        }
        .spl-tagline { margin-top: 3px; margin-bottom: 24px; }
        .spl-loader-wrap { width: min(390px, 78vw); background: rgba(4,18,39,.28); }
        #startup-indicator.fade-out .spl-card { transform: scale(1.035); filter: blur(8px); }
        @media (max-width: 520px) {
            .spl-signature { min-height: 122px; gap: 10px; }
            .spl-signature .spl-logo-wrap { width: 72px; height: 72px; }
            .spl-wordmark { font-size: clamp(1.65rem, 9vw, 2.4rem); letter-spacing: -1.8px; }
            .spl-tagline { margin-top: 2px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .spl-wordmark span { opacity: 1; animation: none !important; }
            .spl-wordmark > i { display: none; }
            .spl-signature .spl-logo-wrap { opacity: 1; animation: none !important; }
            #startup-indicator::before { animation: none !important; }
        }

        /* Versión clara con el wordmark oficial revelado como firma. */
        @keyframes spl-official-reveal {
            0% { clip-path: inset(0 100% 0 0); opacity: .4; transform: translateY(5px); }
            12% { opacity: 1; }
            100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); }
        }
        @keyframes spl-official-scan {
            0% { left: 0; opacity: 0; }
            8% { opacity: 1; }
            88% { left: calc(100% - 3px); opacity: 1; }
            100% { left: calc(100% - 3px); opacity: 0; }
        }
        #startup-indicator {
            background:
                radial-gradient(ellipse at 14% 18%, rgba(57, 196, 255, .28), transparent 38%),
                radial-gradient(ellipse at 84% 78%, rgba(116, 105, 255, .2), transparent 42%),
                linear-gradient(145deg, #f6fbff 0%, #e6f5ff 48%, #edf0ff 100%);
        }
        #startup-indicator::before {
            background: conic-gradient(from 210deg, transparent, rgba(12,175,228,.18), transparent 30%, rgba(94,77,236,.14), transparent 62%);
            opacity: .75;
        }
        #startup-indicator::after {
            opacity: .22;
            background-image:
                linear-gradient(rgba(48,119,178,.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(48,119,178,.15) 1px, transparent 1px);
        }
        #splash-canvas { opacity: .24; mix-blend-mode: multiply; }
        .spl-kicker { color: rgba(20, 65, 105, .68); }
        .spl-kicker span { background: #00aedd; box-shadow: 0 0 0 4px rgba(0,174,221,.1), 0 0 14px rgba(0,174,221,.7); }
        .spl-signature { width: min(610px, 88vw); min-height: 155px; }
        .spl-original-logo-reveal {
            position: relative;
            width: 100%;
            overflow: visible;
            isolation: isolate;
            filter: drop-shadow(0 18px 30px rgba(43,91,143,.15));
        }
        .spl-original-logo-reveal::before {
            content: '';
            position: absolute;
            inset: 15% -6%;
            z-index: -1;
            border-radius: 50%;
            background: radial-gradient(ellipse, rgba(62,202,255,.2), transparent 67%);
            filter: blur(18px);
        }
        .spl-original-logo-reveal #splash-logo-img {
            display: block;
            width: 100%; height: auto; max-width: none; max-height: none;
            padding: 0 !important; border: 0; border-radius: 0 !important;
            background: transparent !important; box-shadow: none !important;
            mix-blend-mode: multiply;
            animation: spl-official-reveal 1.7s .15s cubic-bezier(.3,.04,.18,1) both;
        }
        .spl-original-logo-reveal > i {
            position: absolute;
            top: 4%; bottom: 4%; left: 0; width: 3px;
            border-radius: 99px;
            background: linear-gradient(transparent, #12bce9 15%, #fff 48%, #655ef0 84%, transparent);
            box-shadow: 0 0 18px rgba(21,184,236,.85);
            animation: spl-official-scan 1.7s .15s cubic-bezier(.3,.04,.18,1) both;
        }
        .spl-tagline { color: rgba(37,71,112,.68); text-shadow: none; margin-top: -4px; }
        .spl-tagline i { background: #04aeda; box-shadow: 0 0 8px rgba(4,174,218,.55); }
        .spl-loader-wrap {
            background: rgba(255,255,255,.5);
            border-color: rgba(83,139,193,.2);
            box-shadow: 0 12px 30px rgba(64,103,155,.09), inset 0 1px rgba(255,255,255,.8);
        }
        #splash-status-text { color: rgba(35,69,107,.68); }
        .spl-ai-badge { color: #087fa5; }
        .spl-track { background: rgba(42,94,141,.12); }
        .spl-load-scale span { background: #477ba9; }
        @media (max-width: 520px) {
            .spl-signature { min-height: 112px; width: min(380px, 88vw); }
            .spl-original-logo-reveal { width: 100%; }
        }
        @media (prefers-reduced-motion: reduce) {
            .spl-original-logo-reveal #splash-logo-img { clip-path: none; opacity: 1; animation: none !important; }
            .spl-original-logo-reveal > i { display: none; }
        }

        /* Marca oficial sin placa: profundidad y reflejo sobre transparencia. */
        @keyframes spl-brand-arrive {
            0% { opacity: 0; clip-path: inset(0 48% 0 48%); transform: perspective(700px) rotateX(12deg) scale(.88); filter: blur(10px) saturate(.7); }
            55% { opacity: 1; filter: blur(0) saturate(1.12); }
            78% { clip-path: inset(0 0 0 0); transform: perspective(700px) rotateX(-1deg) scale(1.025); }
            100% { opacity: 1; clip-path: inset(0 0 0 0); transform: perspective(700px) rotateX(0) scale(1); filter: blur(0) saturate(1.04); }
        }
        @keyframes spl-brand-glint {
            0%, 14% { transform: translateX(-180%) skewX(-18deg); opacity: 0; }
            28% { opacity: .8; }
            78%, 100% { transform: translateX(430%) skewX(-18deg); opacity: 0; }
        }
        .spl-original-logo-reveal {
            overflow: hidden;
            padding: 9px 5px;
            filter: drop-shadow(0 20px 28px rgba(40,83,132,.18));
        }
        .spl-original-logo-reveal #splash-logo-img {
            mix-blend-mode: normal;
            animation: spl-brand-arrive 1.45s .08s cubic-bezier(.16,1,.3,1) both;
        }
        .spl-original-logo-reveal > i {
            top: -12%; bottom: -12%; left: 0; width: 18%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), rgba(255,255,255,.92), rgba(73,208,255,.22), transparent);
            box-shadow: none;
            filter: blur(2px);
            animation: spl-brand-glint 1.65s .2s ease-out both;
            mix-blend-mode: screen;
        }
        .spl-original-logo-reveal::after {
            content: '';
            position: absolute;
            left: 13%; right: 10%; bottom: 1px; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(6,154,214,.55), rgba(94,85,232,.45), transparent);
            box-shadow: 0 0 12px rgba(22,166,219,.3);
            transform: scaleX(0);
            animation: spl-track-grow .8s 1.05s cubic-bezier(.16,1,.3,1) forwards;
        }
        @keyframes spl-track-grow { to { transform: scaleX(1); } }
        .spl-tagline { display: none; }
        .spl-loader-wrap { margin-top: 20px; }
        #splash-status-text { letter-spacing: 2px; }
        @media (max-width: 520px) {
            #splash-status-text { font-size: .48rem; letter-spacing: 1.25px; }
            .spl-ai-badge { font-size: .43rem; }
        }
        @media (prefers-reduced-motion: reduce) {
            .spl-original-logo-reveal #splash-logo-img { opacity: 1; clip-path: none; transform: none; animation: none !important; }
            .spl-original-logo-reveal::after { transform: scaleX(1); animation: none !important; }
        }

        /* Construcción auténtica: piezas extraídas del logotipo oficial. */
        @keyframes spl-piece-emblem {
            0% { opacity: 0; transform: scale(.72) rotate(-6deg); }
            72% { opacity: 1; transform: scale(1.04) rotate(1deg); }
            100% { opacity: 1; transform: scale(1) rotate(0); }
        }
        @keyframes spl-piece-letter {
            0% { opacity: 0; transform: translateX(-7px) translateY(4px) scale(.86); }
            65% { opacity: 1; }
            100% { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
        }
        @keyframes spl-piece-subtitle {
            from { opacity: 0; transform: translateY(7px); clip-path: inset(0 50% 0 50%); }
            to { opacity: .92; transform: translateY(0); clip-path: inset(0 0 0 0); }
        }
        @keyframes spl-assembled-shine {
            0%,20% { transform: translateX(-160%) skewX(-20deg); opacity: 0; }
            35% { opacity: .72; }
            82%,100% { transform: translateX(500%) skewX(-20deg); opacity: 0; }
        }
        .spl-original-logo-reveal { display: none !important; }
        /* Sin filter aquí: un filtro sobre el contenedor crea un contexto de
           composición que en el GPU de iOS (iPad) puede dejar en blanco las 12
           capas animadas de adentro. La sombra era de .12 de alfa, imperceptible. */
        .spl-assembled-logo {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(11px, 2vw, 20px);
            width: min(620px, 90vw);
            min-height: 148px;
            overflow: hidden;
            margin-inline: auto;
        }
        .spl-brand-source-hidden {
            position: absolute !important;
            width: 1px !important; height: 1px !important;
            opacity: 0 !important; pointer-events: none !important;
        }
        /* RETIRADO (sep 2026): el logo armado con 13 imágenes sueltas. Nunca
           se logró que saliera completo en iPhone/iPad y no era reproducible
           fuera del dispositivo. Lo reemplaza .spl-marca (una sola imagen) al
           final de este archivo. Estas reglas ya no casan con nada del DOM. */
        .spl-assembled-emblem {
            display: block;
            width: auto;
            height: clamp(86px, 11vw, 128px);
            flex: 0 0 auto;
        }
        .spl-assembled-lockup {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            min-width: 0;
            padding: 7px 0 31px;
        }
        /* La altura vive en una variable y se aplica como LONGITUD a cada pieza.
           Antes las letras usaban height:100%, y Safari/WebKit no deduce el
           ancho de una imagen con alto porcentual dentro de un flex: le asigna
           ancho 0. Por eso en iPhone y iPad se veía el emblema solo, mientras
           en Windows y Android salía completo. */
        .spl-official-letters {
            --spl-letra-h: clamp(48px, 6.6vw, 73px);
            display: flex;
            align-items: center;
            gap: clamp(2px, .42vw, 5px);
            height: var(--spl-letra-h);
            white-space: nowrap;
        }
        /* OJO: el estado en reposo es VISIBLE (opacity 1) a propósito.
           Antes era opacity:0 y solo la animación las mostraba, así que si la
           animación no corría —o WebKit en iPad no pintaba su capa— el nombre
           quedaba invisible para siempre. Con animation-fill-mode:both la
           entrada sigue arrancando desde invisible cuando sí hay animación. */
        .spl-official-letters span {
            display: block;
            height: var(--spl-letra-h);
            opacity: 1;
        }
        .spl-official-letters img { display: block; width: auto; height: var(--spl-letra-h); }
        .spl-official-subtitle {
            position: absolute;
            display: block;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%; height: auto;
            margin: 0 auto;
            opacity: .92;
        }
        /* Sin mix-blend-mode: el modo de fusión obliga a rasterizar todo el grupo
           junto y es el sospechoso principal del logo en blanco en iPad. Sobre
           el fondo claro el brillo se ve igual con alfa normal. */
        .spl-assembled-glint {
            position: absolute;
            top: 3%; bottom: 3%; left: 0; width: 15%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), rgba(255,255,255,.62), rgba(154,226,255,.14), transparent);
            opacity: 0;
            pointer-events: none;
        }
        .spl-signature { width: min(680px, 94vw); }
        .spl-loader-wrap { margin-top: 13px; }
        @media (max-width: 520px) {
            .spl-card { width: 100%; padding-inline: 12px; box-sizing: border-box; }
            .spl-signature { width: 100%; margin-inline: auto; }
            .spl-assembled-logo { gap: 7px; min-height: 105px; width: min(370px, 94vw); justify-content: center; }
            .spl-assembled-emblem { height: clamp(58px, 18vw, 68px); }
            .spl-assembled-lockup { padding-top: 5px; padding-bottom: 22px; }
            .spl-official-letters { --spl-letra-h: clamp(27px, 7.8vw, 34px); gap: 1px; }
            .spl-official-subtitle { width: 100%; }
            .spl-kicker,
            .spl-loader-wrap { margin-left: auto; margin-right: auto; }
        }
        @media (prefers-reduced-motion: reduce) {
            .spl-assembled-emblem,
            .spl-official-letters span,
            .spl-official-subtitle { opacity: 1; transform: none; clip-path: none; animation: none !important; }
            .spl-assembled-glint { display: none; }
        }


        /* ═══ MARCA DEL SPLASH: UNA SOLA IMAGEN ═══════════════════════════
           Sustituye al logo armado con 13 piezas. Aquel dependía de que 13
           descargas y 13 capas animadas salieran bien a la vez; en iPhone y
           iPad no se lograba. Aquí se revela UNA imagen de izquierda a
           derecha: mismo efecto de escritura, una sola cosa que puede fallar.
           En reposo la imagen está completa y visible; si el JS no corre o la
           animación no se aplica, el logo se ve igual, solo que sin efecto. */
        @keyframes spl-marca-entrada {
            0% {
                -webkit-clip-path: inset(0 100% 0 0);
                clip-path: inset(0 100% 0 0);
                opacity: .5;
                transform: scale(.986);
            }
            16% { opacity: 1; }
            100% {
                -webkit-clip-path: inset(0 0 0 0);
                clip-path: inset(0 0 0 0);
                opacity: 1;
                transform: scale(1);
            }
        }
        @keyframes spl-marca-brillo {
            0% { transform: translateX(-140%) skewX(-14deg); opacity: 0; }
            22% { opacity: .85; }
            80%, 100% { transform: translateX(760%) skewX(-14deg); opacity: 0; }
        }

        .spl-marca {
            position: relative;
            width: min(560px, 88vw);
            margin-inline: auto;
            overflow: hidden;
        }
        .spl-marca-img {
            display: block;
            width: 100%;
            height: auto;
        }
        .spl-marca-glint {
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 13%;
            opacity: 0;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
            filter: blur(1px);
            pointer-events: none;
        }
        /* El efecto solo corre cuando la imagen ya cargó (lo enciende
           index-inline-03.js), nunca contra un reloj a ciegas. */
        .spl-marca.spl-marca-lista .spl-marca-img {
            animation: spl-marca-entrada 1s cubic-bezier(.22,1,.32,1) both;
        }
        .spl-marca.spl-marca-lista .spl-marca-glint {
            animation: spl-marca-brillo .9s .1s ease-out both;
        }
        @media (max-width: 520px) {
            .spl-marca { width: min(370px, 92vw); }
        }
        @media (prefers-reduced-motion: reduce) {
            .spl-marca .spl-marca-img { animation: none !important; }
            .spl-marca-glint { display: none !important; }
        }