#dataShieldPLF21 {
    --ds-fondo: #050b14;
    --ds-panel: #0b1624;
    --ds-panel-2: #101f31;
    --ds-linea: rgba(148, 163, 184, 0.22);
    --ds-texto: #eef6ff;
    --ds-suave: #9db0c4;
    --ds-cian: #27e0ff;
    --ds-naranja: #ff9d45;
    --ds-verde: #41e6a1;
    --ds-rojo: #ff637d;
    min-height: 100vh;
    padding: clamp(18px, 3vw, 42px);
    color: var(--ds-texto);
    background:
        linear-gradient(rgba(39, 224, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(39, 224, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 8% 5%, rgba(39, 224, 255, 0.12), transparent 28rem),
        radial-gradient(circle at 92% 16%, rgba(255, 157, 69, 0.1), transparent 28rem),
        var(--ds-fondo);
    background-size: 34px 34px, 34px 34px, auto, auto, auto;
    border-radius: 24px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#dataShieldPLF21 *, #dataShieldPLF21 *::before, #dataShieldPLF21 *::after { box-sizing: border-box; }
#dataShieldPLF21 h1, #dataShieldPLF21 h2, #dataShieldPLF21 h3, #dataShieldPLF21 p { margin-top: 0; }
#dataShieldPLF21 button, #dataShieldPLF21 input, #dataShieldPLF21 select { font: inherit; }
#dataShieldPLF21 button { cursor: pointer; }
#dataShieldPLF21 button:disabled { cursor: not-allowed; opacity: 0.42; }

#dataShieldPLF21 .enlace-volver {
    margin-bottom: 18px;
    padding: 6px 0;
    color: var(--ds-cian);
    border: 0;
    background: transparent;
    font-weight: 800;
}

.ds21-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 245px;
    gap: 28px;
    align-items: center;
    overflow: hidden;
    padding: clamp(26px, 4vw, 48px);
    border: 1px solid var(--ds-linea);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(11, 22, 36, 0.96), rgba(16, 31, 49, 0.9));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.ds21-hero h1 {
    margin-bottom: 14px;
    font-size: clamp(2.4rem, 6vw, 5.5rem);
    line-height: 0.94;
    letter-spacing: -0.065em;
}

.ds21-hero p { max-width: 760px; color: var(--ds-suave); font-size: 1.03rem; line-height: 1.65; }
.ds21-kicker { display: inline-block; margin-bottom: 9px; color: var(--ds-naranja); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.ds21-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ds21-chips span { padding: 7px 10px; color: #bff7ff; border: 1px solid rgba(39, 224, 255, 0.22); border-radius: 999px; background: rgba(39, 224, 255, 0.06); font-size: 0.75rem; font-weight: 750; }

.ds21-progreso { padding: 22px; border: 1px solid rgba(255, 157, 69, 0.28); border-radius: 18px; background: rgba(3, 9, 17, 0.56); }
.ds21-progreso small, .ds21-progreso strong, .ds21-progreso span, .ds21-progreso b { display: block; }
.ds21-progreso small { color: var(--ds-suave); font-size: 0.65rem; font-weight: 850; letter-spacing: 0.12em; }
.ds21-progreso strong { margin: 5px 0; color: var(--ds-naranja); font-size: 2.7rem; }
.ds21-progreso span { color: var(--ds-suave); font-size: 0.8rem; }
.ds21-progreso b { margin-top: 12px; color: var(--ds-verde); }
.ds21-barra { height: 8px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.ds21-barra i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ds-naranja), var(--ds-cian)); transition: width .3s ease; }

.ds21-identificacion { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 12px; margin: 20px 0; }
.ds21-identificacion label { color: var(--ds-suave); font-size: .78rem; font-weight: 800; }
.ds21-identificacion input, .ds21-identificacion select { display: block; width: 100%; min-height: 45px; margin-top: 6px; padding: 9px 12px; color: var(--ds-texto); border: 1px solid var(--ds-linea); border-radius: 10px; outline: 0; background: #07111e; }
.ds21-identificacion input:focus, .ds21-identificacion select:focus { border-color: var(--ds-cian); box-shadow: 0 0 0 3px rgba(39,224,255,.1); }

.ds21-demo, .ds21-mision { margin-top: 24px; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--ds-linea); border-radius: 22px; background: rgba(11, 22, 36, 0.9); box-shadow: 0 20px 60px rgba(0,0,0,.22); }
.ds21-seccion-cabecera { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 22px; }
.ds21-seccion-cabecera h2, .ds21-estacion h2, .ds21-cierre h2 { margin-bottom: 7px; font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.035em; }
.ds21-seccion-cabecera p, .ds21-estacion header p, .ds21-cierre p { margin-bottom: 0; color: var(--ds-suave); line-height: 1.6; }

.ds21-paquetes { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; }
.ds21-paquete { min-width: 0; min-height: 86px; padding: 12px; color: var(--ds-texto); text-align: left; border: 1px solid var(--ds-linea); border-radius: 13px; background: rgba(4, 12, 22, .66); transition: transform .15s ease, border-color .15s ease; }
.ds21-paquete:hover, .ds21-paquete.activo { transform: translateY(-3px); border-color: var(--ds-naranja); }
.ds21-paquete span, .ds21-paquete code { display: block; }
.ds21-paquete span { margin-bottom: 10px; color: var(--ds-naranja); font-size: .66rem; font-weight: 900; }
.ds21-paquete code { overflow: hidden; color: #c9f8ff; white-space: nowrap; text-overflow: ellipsis; }

.ds21-escaner { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 15px; margin-top: 16px; }
.ds21-rayo { position: relative; display: grid; place-items: center; min-height: 250px; overflow: hidden; border: 1px solid rgba(39,224,255,.25); border-radius: 16px; background: repeating-linear-gradient(0deg, rgba(39,224,255,.03) 0 2px, transparent 2px 8px), #06111e; }
.ds21-rayo::before { content:""; position:absolute; width: 120%; height: 3px; background: var(--ds-cian); box-shadow: 0 0 20px var(--ds-cian); animation: ds21scan 2s infinite ease-in-out; }
.ds21-rayo span { color: var(--ds-cian); font-size: .7rem; font-weight: 900; letter-spacing: .22em; }
@keyframes ds21scan { 0%,100% { transform: translateY(-90px); } 50% { transform: translateY(90px); } }
.ds21-resultado-escaner { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: 1px; overflow: hidden; border: 1px solid var(--ds-linea); border-radius: 16px; background: var(--ds-linea); }
.ds21-resultado-escaner > div { padding: 16px; background: #091624; }
.ds21-resultado-escaner small { display:block; margin-bottom:6px; color:var(--ds-suave); font-size:.63rem; font-weight:900; letter-spacing:.1em; }
.ds21-resultado-escaner strong { color:#eaf8ff; overflow-wrap:anywhere; }
.ds21-resultado-escaner p { margin:0; color:#d1deeb; line-height:1.45; }
.ds21-resultado-escaner .ds21-ancho { grid-column:1/-1; }

.ds21-transformacion { display:flex; gap:12px; align-items:stretch; margin-top:14px; }
.ds21-transformacion > div { flex:1; display:grid; gap:5px; padding:13px 15px; color:var(--ds-suave); border-left:4px solid var(--ds-cian); border-radius:10px; background:rgba(39,224,255,.06); }
.ds21-transformacion > div code { color:var(--ds-cian); font-weight:800; }
.ds21-transformacion > div span { color:#dbe8f4; }

#dataShieldPLF21 .boton-principal, .ds21-boton-claro { min-height:42px; padding:9px 15px; border-radius:11px; font-weight:850; }
#dataShieldPLF21 .boton-principal { color:#07111c; border:1px solid var(--ds-cian); background:linear-gradient(135deg,var(--ds-cian),#73f0d0); }
.ds21-boton-claro { color:var(--ds-texto); border:1px solid var(--ds-linea); background:rgba(255,255,255,.045); }
.ds21-acceso { margin-top:12px; }

.ds21-navegacion { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:15px; }
.ds21-navegacion button { display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; align-items:center; min-height:62px; padding:9px; color:var(--ds-suave); text-align:left; border:1px solid var(--ds-linea); border-radius:12px; background:rgba(4,12,22,.65); font-size:.75rem; font-weight:800; }
.ds21-navegacion button b { display:grid; place-items:center; width:32px; height:32px; color:#07111c; border-radius:9px; background:var(--ds-naranja); }
.ds21-navegacion button.activa { color:var(--ds-texto); border-color:var(--ds-cian); background:rgba(39,224,255,.07); }
.ds21-navegacion button.superada { border-color:rgba(65,230,161,.55); }
.ds21-navegacion button.superada b { background:var(--ds-verde); }

.ds21-estacion { overflow:hidden; border:1px solid var(--ds-linea); border-radius:18px; background:rgba(4,12,22,.58); }
.ds21-estacion > header { display:flex; justify-content:space-between; gap:18px; padding:22px; border-bottom:1px solid var(--ds-linea); }
.ds21-intentos { flex:0 0 auto; min-width:80px; padding:10px; text-align:center; border:1px solid rgba(255,157,69,.23); border-radius:12px; background:rgba(255,157,69,.06); }
.ds21-intentos small, .ds21-intentos strong { display:block; }
.ds21-intentos small { color:var(--ds-suave); font-size:.6rem; letter-spacing:.1em; }
.ds21-intentos strong { color:var(--ds-naranja); font-size:1.6rem; }
.ds21-actividad { padding:20px; }

.ds21-grid-clasificacion { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.ds21-tarjeta-dato { display:grid; gap:10px; padding:15px; border:1px solid var(--ds-linea); border-radius:13px; background:#091624; transition:border-color .2s ease; }
.ds21-tarjeta-dato > span { color:var(--ds-naranja); font-size:.65rem; font-weight:900; letter-spacing:.1em; }
.ds21-tarjeta-dato code { min-height:30px; color:#c9f8ff; font-size:1rem; overflow-wrap:anywhere; }
.ds21-tarjeta-dato select { width:100%; min-height:39px; padding:7px; color:var(--ds-texto); border:1px solid var(--ds-linea); border-radius:9px; background:#050e19; }

.ds21-lista-casos { display:grid; gap:10px; }
.ds21-caso { padding:16px; border:1px solid var(--ds-linea); border-radius:13px; background:#091624; transition:border-color .2s ease; }
.ds21-caso > span { color:var(--ds-naranja); font-size:.65rem; font-weight:900; letter-spacing:.1em; }
.ds21-caso > code { display:block; margin-bottom:12px; padding:12px; color:#c9f8ff; border-radius:9px; background:#040b13; white-space:pre-wrap; }
.ds21-caso h3 { margin-bottom:12px; font-size:.98rem; }
.ds21-opciones { display:flex; flex-wrap:wrap; gap:8px; }
.ds21-opciones button, .ds21-bloques button { padding:8px 12px; color:var(--ds-suave); border:1px solid var(--ds-linea); border-radius:9px; background:rgba(255,255,255,.035); font-weight:750; }
.ds21-opciones button:hover, .ds21-opciones button.elegida { color:var(--ds-texto); border-color:var(--ds-cian); background:rgba(39,224,255,.09); }
.ds21-tarjeta-dato.correcta, .ds21-caso.correcta { border-color:var(--ds-verde); }
.ds21-tarjeta-dato.incorrecta, .ds21-caso.incorrecta { border-color:var(--ds-rojo); }

.ds21-ruta-instruccion { margin-bottom:15px; padding:14px; color:#d8e5f2; border-left:4px solid var(--ds-naranja); border-radius:9px; background:rgba(255,157,69,.07); }
.ds21-ruta-instruccion code { color:var(--ds-cian); }
.ds21-constructor { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ds21-constructor > section { padding:15px; border:1px solid var(--ds-linea); border-radius:13px; background:#091624; }
.ds21-constructor > section > span { display:block; margin-bottom:12px; color:var(--ds-suave); font-size:.65rem; font-weight:900; letter-spacing:.12em; }
.ds21-bloques { display:grid; gap:8px; }
.ds21-bloques button { text-align:left; }
.ds21-bloques button:not(:disabled):hover { color:var(--ds-texto); border-color:var(--ds-naranja); }
.ds21-ruta-elegida { display:grid; gap:7px; margin:0 0 12px; padding-left:29px; }
.ds21-ruta-elegida li { padding:9px 11px; color:#dce8f4; border:1px solid var(--ds-linea); border-radius:8px; background:#050e19; }
.ds21-ruta-elegida li.correcta { border-color:var(--ds-verde); }
.ds21-ruta-elegida li.incorrecta { border-color:var(--ds-rojo); }
.ds21-ruta-elegida li.vacia { color:var(--ds-suave); font-style:italic; }

.ds21-retro { margin:0 20px 20px; padding:13px 15px; color:var(--ds-suave); border-left:4px solid var(--ds-cian); border-radius:9px; background:rgba(39,224,255,.06); }
.ds21-retro.exito { color:#bff9df; border-color:var(--ds-verde); background:rgba(65,230,161,.07); }
.ds21-retro.error { color:#ffd1d9; border-color:var(--ds-rojo); background:rgba(255,99,125,.07); }
.ds21-controles { display:flex; justify-content:space-between; gap:10px; margin-top:14px; }
.ds21-cierre { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:26px; padding:22px; border:1px solid rgba(65,230,161,.25); border-radius:16px; background:rgba(65,230,161,.055); }
.ds21-nota { margin:14px 0 0; color:var(--ds-suave); text-align:center; font-size:.75rem; }

@media (max-width:980px) {
    .ds21-paquetes { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .ds21-navegacion { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .ds21-grid-clasificacion { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
    #dataShieldPLF21 { padding:14px; border-radius:0; }
    .ds21-hero, .ds21-identificacion, .ds21-escaner, .ds21-constructor { grid-template-columns:1fr; }
    .ds21-rayo { min-height:110px; }
    .ds21-rayo::before { animation-name:ds21scanHorizontal; width:3px; height:130%; }
    @keyframes ds21scanHorizontal { 0%,100%{transform:translateX(-120px)} 50%{transform:translateX(120px)} }
    .ds21-seccion-cabecera, .ds21-cierre { display:block; }
    .ds21-seccion-cabecera > button, .ds21-cierre > button { margin-top:12px; }
}
@media (max-width:520px) {
    .ds21-paquetes, .ds21-navegacion, .ds21-grid-clasificacion { grid-template-columns:1fr; }
    .ds21-resultado-escaner { grid-template-columns:1fr; }
    .ds21-resultado-escaner .ds21-ancho { grid-column:auto; }
    .ds21-transformacion, .ds21-controles { display:grid; }
    .ds21-estacion > header { display:block; }
    .ds21-intentos { margin-top:12px; }
}

@media (prefers-reduced-motion:reduce) {
    .ds21-rayo::before { animation:none; }
    #dataShieldPLF21 * { scroll-behavior:auto !important; transition:none !important; }
}