* { box-sizing: border-box; }

        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #0d2b45;
            display: flex;
            flex-direction: column;
        }

        .wrap {
            flex: 1;
            display: flex;
            align-items: stretch;
            min-height: 100vh;
        }

        .brand {
            display: none;
            flex: 0 0 36%;
            position: relative;
            background: linear-gradient(150deg, #123c5c 0%, #0d2b45 100%);
            overflow: hidden;
        }
        .brand::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
            background-size: 34px 34px;
            mask-image: radial-gradient(circle at 30% 30%, black, transparent 72%);
        }
        .brand-content {
            position: relative;
            z-index: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 52px 48px;
            color: #eaf2fa;
        }
        .brand-content h1 { font-size: 28px; line-height: 1.28; margin: 0 0 16px; font-weight: 700; max-width: 360px; }
        .brand-content p { font-size: 14px; line-height: 1.7; color: #a9c4de; max-width: 320px; }

        .panel {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 40px 18px 56px;
        }

        .card {
            width: 100%;
            max-width: 600px;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 40px rgba(13,43,69,0.18);
            padding: 36px 32px 28px;
        }

        .card-title { font-size: 21px; font-weight: 700; color: #123c5c; margin: 0 0 30px; }
        .card-sub { font-size: 13px; color: #6b7c93; margin: 0 0 24px; line-height: 1.55; }

        fieldset { border: none; margin: 0 0 20px; padding: 0; }
        legend {
            font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
            color: #1c6dab; padding: 0 0 8px; margin-bottom: 12px; width: 100%; border-bottom: 1px solid #e4ebf3;
        }

        .grid { display: grid; grid-template-columns: 1fr; gap: 16px 18px; }
        .grid.cols-2 { grid-template-columns: 1fr 1fr; }
        .grid.cols-3 { grid-template-columns: 1.3fr 1fr 1fr; }
        .span-2 { grid-column: span 2; }

        .field label { display: block; font-size: 12.5px; font-weight: 600; color: #344563; margin-bottom: 6px; }
        .field label .req { color: #d9534f; margin-left: 2px; }
        .field label .opt { font-weight: 400; color: #6b7c93; }

        .field input, .field select {
            width: 100%; height: 46px; border: 1.5px solid #d0dae6; border-radius: 9px; padding: 0 14px;
            font-size: 14.5px; font-family: inherit; color: #1a1a2e; background: #f7f9fc; outline: none;
            transition: border-color .15s, box-shadow .15s;
        }
        .field input:focus, .field select:focus { border-color: #428bca; box-shadow: 0 0 0 3px rgba(66,139,202,0.15); }

        .field input.is-invalid, .field select.is-invalid { border-color: #d9534f; }
        .field input.is-invalid:focus, .field select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217,83,79,0.14); }

        .field-msg { display: block; min-height: 14px; font-size: 11.5px; color: #d9534f; margin-top: 5px; }

        .btn-registro {
            width: 100%; height: 50px; border: none; border-radius: 10px;
            background: linear-gradient(135deg, #1c6dab 0%, #123c5c 100%); color: #fff;
            font-size: 15.5px; font-weight: 700; cursor: pointer; transition: opacity .15s;
        }
        .btn-registro:hover:not(:disabled) { opacity: 0.92; }
        .btn-registro:disabled {
            background: #b9c4cf; cursor: not-allowed; opacity: 1;
        }

        .botones-registro {
            display: flex; gap: 10px;
        }
        .botones-registro .btn-registro {
            flex: 2; width: auto;
            display: flex; align-items: center; justify-content: center; gap: 8px;
        }
        .btn-volver {
            flex: 1; height: 50px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        border: 1px solid #1c6dab; color: #1c6dab; background: transparent;
        font-size: 15.5px; font-weight: 700; text-decoration: none;
        transition: background .15s;
        }
        .btn-volver:hover { background: #eaf2f9; color: #1c6dab; }
        .foot-links { text-align: center; margin-top: 18px; font-size: 12.5px; color: #6b7c93; }
        .foot-links a { color: #1c6dab; text-decoration: none; font-weight: 600; }
        .foot-links a:hover { text-decoration: underline; }

        .alert-error {
            background: #fdecea; border-left: 4px solid #d9534f; color: #9c2b25;
            border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px;
        }
        .result-card {
            background: #eaf6ec; border-left: 4px solid #3fa85a; border-radius: 10px;
            padding: 18px 20px; margin-bottom: 22px; color: #1e5c31; font-size: 13.5px; line-height: 1.6;
        }
        .result-card b { font-size: 15px; }
        .result-cred {
            background: #fff; border: 1px dashed #3fa85a; border-radius: 8px;
            padding: 10px 14px; margin-top: 10px; font-family: 'Consolas', monospace; font-size: 14px;
        }

        /* honeypot: oculto para humanos, visible para bots */
        .hp-field { position: absolute; left: -9999px; top: -9999px; }

        @media (min-width: 900px) { .brand { display: flex; } }
        @media (max-width: 640px) {
            .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
            .span-2 { grid-column: span 1; }
            .card { padding: 28px 20px 24px; border-radius: 12px; }
        }

        .checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
        .checkbox-pill {
            display: flex; align-items: center; gap: 7px;
            border: 1.5px solid #d0dae6; border-radius: 999px;
            padding: 8px 16px; font-size: 13.5px; color: #344563;
            cursor: pointer; background: #f7f9fc; transition: border-color .15s, background .15s;
        }
        .checkbox-pill input { accent-color: #1c6dab; width: 15px; height: 15px; cursor: pointer; }
        .checkbox-pill:has(input:checked) { border-color: #1c6dab; background: #eaf3fa; color: #123c5c; }
        .canal-field { margin-top: 16px;
        } 
        
        .mobile-info {
            display: block;
            border-radius: 10px;
            padding: 14px 16px;
            margin-bottom: 22px;
            font-size: 12.5px;
            color: #2f5f85;
            line-height: 1.6;
        }

        @media (min-width: 900px) {
            .mobile-info { display: none; }
        }