/* ==========================================================
   BIENVENIDA (onboarding) + PANEL — mismo lenguaje que la portada v2
   Outfit, verde #05664a como acento, superficies de cristal, sombras teñidas.
   ========================================================== */
:root{
  --ob-acento:#05664a; --ob-acento-2:#1fa06e; --ob-acento-claro:#e7f2ee;
  --ob-tinta:#16181d; --ob-tinta-2:#5b6070; --ob-linea:#e4e6e3; --ob-bg:#f6f7f5;
  --ob-borde-luz:inset 0 1px 0 rgba(255,255,255,.8);
  --ob-sombra:0 30px 70px -32px rgba(5,60,40,.30), 0 8px 24px -14px rgba(5,60,40,.16);
  --ob-ease:cubic-bezier(.23,1,.32,1);
}
body.ob-activo{overflow:hidden}

#onboarding{position:fixed; inset:0; z-index:900; overflow:auto; background:var(--ob-bg); color:var(--ob-tinta);
  font-family:Outfit,Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; align-items:center; padding:18px 16px 40px}
#onboarding[hidden]{display:none}
.ob-fondo{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.ob-fondo span{position:absolute; border-radius:50%; filter:blur(90px); opacity:.7}
.ob-fondo .b1{width:640px;height:640px; background:#c9ebdc; left:-220px; top:-240px}
.ob-fondo .b2{width:560px;height:560px; background:#dcd6ff; right:-200px; bottom:-220px; opacity:.55}
.ob-top{position:relative; z-index:1; width:100%; max-width:980px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.ob-logo{display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:-.02em; font-size:18px; color:var(--ob-acento)}
.ob-logo .logo-icon{width:26px;height:26px; border-radius:8px; background:var(--ob-acento); color:#fff; display:grid; place-items:center}
.ob-atras,.ob-saltar{background:none; border:0; color:var(--ob-tinta-2); font:inherit; font-size:14px; font-weight:500; cursor:pointer; padding:8px 10px; border-radius:10px; display:inline-flex; align-items:center; gap:4px; transition:background .16s var(--ob-ease), color .16s}
.ob-atras{justify-self:start}.ob-saltar{justify-self:end}
.ob-atras:hover,.ob-saltar:hover{background:rgba(5,60,40,.06); color:var(--ob-tinta)}
.ob-atras:disabled,.ob-saltar:disabled{opacity:0; pointer-events:none}

/* progreso: 4 fases con relleno */
.ob-progreso{position:relative; z-index:1; width:100%; max-width:640px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:14px 0 6px}
.ob-seg{display:flex; align-items:center; gap:6px}
.ob-seg .ob-punto{width:14px;height:14px; border-radius:50%; border:2px solid #d5dbd7; background:#fff; display:grid; place-items:center; font-size:9px; color:#fff; flex:none; transition:all .3s var(--ob-ease)}
.ob-seg.actual .ob-punto{border-color:var(--ob-acento); box-shadow:0 0 0 4px rgba(5,102,74,.14)}
.ob-seg.hecha .ob-punto{background:var(--ob-acento); border-color:var(--ob-acento)}
.ob-seg b{flex:1; height:6px; border-radius:99px; background:#e3e8e5; overflow:hidden; display:block}
.ob-seg b span{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--ob-acento),var(--ob-acento-2)); transition:width .5s var(--ob-ease)}
.ob-fase-nombre{grid-column:1/-1; text-align:center; font-size:12px; color:var(--ob-tinta-2); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:4px}

/* tarjeta de pregunta */
.ob-card{position:relative; z-index:1; width:100%; max-width:560px; margin-top:34px; text-align:center}
.ob-card h1{font-size:clamp(26px,3.4vw,36px); line-height:1.1; letter-spacing:-.03em; font-weight:800; margin:0 0 10px; text-wrap:balance}
.ob-sub{color:var(--ob-tinta-2); font-size:16px; line-height:1.5; margin:0 auto 26px; max-width:46ch}
.ob-card h1 + .ob-lista,.ob-card h1 + .ob-cards,.ob-card h1 + .ob-sino,.ob-card h1 + .ob-cita,.ob-card h1 + .ob-antes,.ob-card h1 + .ob-slider,.ob-card h1 + .ob-campo{margin-top:26px}
@keyframes ob-in{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes ob-in-atras{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}
.ob-in{animation:ob-in .38s var(--ob-ease) both}.ob-in-atras{animation:ob-in-atras .3s var(--ob-ease) both}
@media (prefers-reduced-motion:reduce){.ob-in,.ob-in-atras{animation:none}}

/* opciones (una / varias) */
.ob-lista{display:flex; flex-direction:column; gap:10px}
.ob-op{width:100%; background:rgba(255,255,255,.85); border:1px solid rgba(5,60,40,.10); border-radius:14px; padding:15px 18px; font:inherit; font-size:16px; font-weight:500; color:var(--ob-tinta); cursor:pointer; text-align:center; box-shadow:var(--ob-borde-luz), 0 6px 18px -14px rgba(5,40,30,.35); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; gap:12px; transition:transform .14s var(--ob-ease), border-color .16s, box-shadow .16s, background .16s}
.ob-op:hover{border-color:rgba(5,102,74,.45); background:#fff; box-shadow:var(--ob-borde-luz), 0 12px 28px -16px rgba(5,60,40,.35)}
.ob-op:active{transform:scale(.985)}
.ob-op.sel{border-color:var(--ob-acento); background:#fff; box-shadow:0 0 0 3px rgba(5,102,74,.16), 0 12px 28px -16px rgba(5,60,40,.35)}
.ob-check{justify-content:flex-start; text-align:left}
.ob-caja{width:20px;height:20px; border-radius:6px; border:1.5px solid #c6cfca; display:grid; place-items:center; font-size:12px; color:#fff; flex:none; transition:all .16s var(--ob-ease)}
.ob-check.sel .ob-caja{background:var(--ob-acento); border-color:var(--ob-acento)}

/* tarjetas grandes (elige producto) */
.ob-cards{display:flex; flex-direction:column; gap:12px; text-align:left}
.ob-cardop{position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; width:100%; padding:18px 20px; border-radius:18px; border:1px solid rgba(5,60,40,.10); background:rgba(255,255,255,.88); backdrop-filter:blur(10px); cursor:pointer; font:inherit; color:var(--ob-tinta); text-align:left;
  box-shadow:var(--ob-borde-luz), 0 10px 26px -18px rgba(5,60,40,.4); transition:transform .16s var(--ob-ease), border-color .16s, box-shadow .16s}
.ob-cardop:hover{transform:translateY(-2px); border-color:rgba(5,102,74,.4); box-shadow:var(--ob-borde-luz), 0 22px 44px -22px rgba(5,60,40,.45)}
.ob-cardop:active{transform:scale(.99)}
.ob-cardop.sel{border-color:var(--ob-acento); box-shadow:0 0 0 3px rgba(5,102,74,.16), 0 22px 44px -22px rgba(5,60,40,.45)}
.ob-ico{width:48px;height:48px; border-radius:14px; display:grid; place-items:center; font-size:24px; color:var(--ob-acento); background:linear-gradient(180deg,#eef7f3,#dfefe8); box-shadow:var(--ob-borde-luz)}
.ob-cardtxt strong{display:block; font-size:17px; font-weight:700; letter-spacing:-.01em; margin-bottom:3px}
.ob-cardtxt small{display:block; font-size:14px; color:var(--ob-tinta-2); line-height:1.4}
.ob-tag{position:absolute; top:-10px; right:16px; font-style:normal; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:linear-gradient(90deg,var(--ob-acento),var(--ob-acento-2)); padding:4px 9px; border-radius:99px; box-shadow:0 6px 14px -6px rgba(5,102,74,.6)}
.ob-flecha{color:#b7c2bc; font-size:18px; transition:transform .16s var(--ob-ease), color .16s}
.ob-cardop:hover .ob-flecha{transform:translateX(3px); color:var(--ob-acento)}

/* chips de puestos y ciudad */
.ob-campo{text-align:left}
.ob-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:#fff; border:1px solid rgba(5,60,40,.14); border-radius:14px; padding:10px 12px; box-shadow:var(--ob-borde-luz), 0 6px 18px -14px rgba(5,40,30,.35); cursor:text}
.ob-chips:focus-within{border-color:var(--ob-acento); box-shadow:0 0 0 3px rgba(5,102,74,.14)}
.ob-chips input{flex:1; min-width:160px; border:0; outline:0; font:inherit; font-size:16px; padding:6px 4px; background:transparent; color:var(--ob-tinta)}
.ob-chip{display:inline-flex; align-items:center; gap:6px; background:var(--ob-acento-claro); color:var(--ob-acento); border-radius:99px; padding:6px 8px 6px 12px; font-size:14px; font-weight:600}
.ob-chip button{border:0; background:rgba(5,102,74,.12); color:inherit; width:20px;height:20px; border-radius:50%; display:grid; place-items:center; cursor:pointer; font-size:11px}
.ob-chip button:hover{background:rgba(5,102,74,.25)}
.ob-sug{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px}
.ob-sug small{width:100%; font-size:12px; color:var(--ob-tinta-2); font-weight:600; letter-spacing:.04em; text-transform:uppercase}
.ob-sugb{border:1px solid rgba(5,60,40,.14); background:rgba(255,255,255,.8); border-radius:99px; padding:7px 12px; font:inherit; font-size:14px; color:var(--ob-tinta); cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .14s var(--ob-ease)}
.ob-sugb:hover{border-color:var(--ob-acento); color:var(--ob-acento); background:#fff}
.ob-sugb.sel{background:var(--ob-acento); border-color:var(--ob-acento); color:#fff}
.ob-input{display:flex; align-items:center; gap:10px; background:#fff; border:1px solid rgba(5,60,40,.14); border-radius:14px; padding:4px 14px; box-shadow:var(--ob-borde-luz), 0 6px 18px -14px rgba(5,40,30,.35)}
.ob-input i{color:var(--ob-tinta-2); font-size:18px}
.ob-input input{flex:1; border:0; outline:0; font:inherit; font-size:17px; padding:12px 0; background:transparent; color:var(--ob-tinta)}
.ob-input:focus-within{border-color:var(--ob-acento); box-shadow:0 0 0 3px rgba(5,102,74,.14)}

/* deslizador salario */
.ob-slider{background:rgba(255,255,255,.88); border:1px solid rgba(5,60,40,.10); border-radius:20px; padding:28px 26px 20px; box-shadow:var(--ob-borde-luz), 0 16px 40px -24px rgba(5,60,40,.4)}
.ob-cifra{font-size:44px; font-weight:800; letter-spacing:-.03em; color:var(--ob-acento); font-variant-numeric:tabular-nums; margin-bottom:18px}
.ob-slider input[type=range]{--pct:20%; width:100%; appearance:none; height:8px; border-radius:99px; background:linear-gradient(90deg,var(--ob-acento) var(--pct), #e3e8e5 var(--pct)); outline:0}
.ob-slider input[type=range]::-webkit-slider-thumb{appearance:none; width:26px;height:26px; border-radius:50%; background:#fff; border:3px solid var(--ob-acento); box-shadow:0 4px 12px rgba(5,60,40,.3); cursor:grab}
.ob-slider input[type=range]::-moz-range-thumb{width:20px;height:20px; border-radius:50%; background:#fff; border:3px solid var(--ob-acento); box-shadow:0 4px 12px rgba(5,60,40,.3); cursor:grab}
.ob-rango-pies{display:flex; justify-content:space-between; font-size:12px; color:var(--ob-tinta-2); margin-top:10px; font-variant-numeric:tabular-nums}

/* hora + interruptor */
.ob-hora{display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:26px}
.ob-hora input[type=time]{font:inherit; font-size:40px; font-weight:800; letter-spacing:-.02em; color:var(--ob-acento); border:1px solid rgba(5,60,40,.14); background:#fff; border-radius:18px; padding:10px 22px; box-shadow:var(--ob-borde-luz), 0 16px 40px -24px rgba(5,60,40,.4)}
.ob-switch{display:inline-flex; align-items:center; gap:12px; font-size:15px; font-weight:500; cursor:pointer; user-select:none}
.ob-switch input{position:absolute; opacity:0; width:0; height:0}
.ob-switch span{width:46px; height:26px; border-radius:99px; background:#cfd7d2; position:relative; transition:background .2s; flex:none}
.ob-switch span::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .2s var(--ob-ease)}
.ob-switch input:checked + span{background:var(--ob-acento)}
.ob-switch input:checked + span::after{transform:translateX(20px)}

/* pantallas informativas */
.ob-tipo-info{display:flex; flex-direction:column; align-items:center}
.ob-tipo-info .ob-info{order:-1; margin-top:10px}
.ob-tipo-info h1{margin-top:4px}
.ob-info{display:flex; justify-content:center; margin:0 0 22px}
.ob-ilu{width:132px; height:132px; border-radius:40px; display:grid; place-items:center; font-size:60px; color:var(--ob-acento); background:radial-gradient(circle at 30% 25%, #ffffff, #e2f1ea 60%, #cfe6da); box-shadow:var(--ob-borde-luz), 0 30px 60px -28px rgba(5,60,40,.5); animation:ob-flota 4s ease-in-out infinite}
@keyframes ob-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ob-tipo-info .ob-sub{font-size:17px; max-width:40ch}
.ob-cita{margin:0 0 20px; background:#fff; border:1px solid rgba(5,60,40,.10); border-radius:18px; padding:24px 22px; font-size:19px; font-weight:600; line-height:1.4; letter-spacing:-.01em; box-shadow:var(--ob-borde-luz), 0 16px 40px -24px rgba(5,60,40,.4)}
.ob-sino{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* antes / después */
.ob-antes{display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:left}
.ob-ad{position:relative; border-radius:20px; padding:26px 20px 20px; border:1px solid rgba(5,60,40,.10); background:#fff; box-shadow:var(--ob-borde-luz), 0 16px 40px -24px rgba(5,60,40,.4)}
.ob-ad > i{font-size:40px; display:block; margin-bottom:10px}
.ob-ad.malo > i{color:#9aa1ae}.ob-ad.bueno > i{color:var(--ob-acento)}
.ob-ad.bueno{background:linear-gradient(180deg,#ffffff,#eef7f3); border-color:rgba(5,102,74,.3)}
.ob-ad-tag{position:absolute; top:-11px; left:16px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:99px; background:#e9ecea; color:var(--ob-tinta-2)}
.ob-ad.bueno .ob-ad-tag{background:var(--ob-acento); color:#fff}
.ob-ad ul{margin:0; padding-left:18px; font-size:14px; line-height:1.55; color:var(--ob-tinta)}
.ob-ad.malo ul{color:var(--ob-tinta-2)}

/* generando */
.ob-gen{background:rgba(255,255,255,.9); border:1px solid rgba(5,60,40,.10); border-radius:22px; padding:30px 26px 22px; box-shadow:var(--ob-borde-luz), 0 30px 70px -32px rgba(5,60,40,.45)}
.ob-gen-anillo{width:64px;height:64px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center; font-size:28px; color:var(--ob-acento); background:conic-gradient(from 0deg, var(--ob-acento), #bfe3d3, var(--ob-acento)); animation:ob-gira 1.6s linear infinite; position:relative}
.ob-gen-anillo::before{content:""; position:absolute; inset:4px; border-radius:50%; background:#fff}
.ob-gen-anillo i{position:relative; animation:ob-gira 1.6s linear infinite reverse}
@keyframes ob-gira{to{transform:rotate(360deg)}}
.ob-gen-barra{height:6px; border-radius:99px; background:#e3e8e5; overflow:hidden; margin-bottom:18px}
.ob-gen-barra span{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--ob-acento),var(--ob-acento-2)); transition:width .6s var(--ob-ease)}
.ob-gen-pasos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; text-align:left; font-size:14px; color:var(--ob-tinta-2)}
.ob-gen-pasos li{display:flex; align-items:center; gap:8px}
.ob-gen-pasos li i{font-size:17px; color:#c5cdc8}
.ob-gen-pasos li.actual{color:var(--ob-tinta); font-weight:600}
.ob-gen-pasos li.actual i{color:var(--ob-acento); animation:ob-gira 1s linear infinite}
.ob-gen-pasos li.hecho{color:var(--ob-tinta)}.ob-gen-pasos li.hecho i{color:var(--ob-acento)}
.ob-gen small{display:flex; justify-content:center; align-items:center; gap:6px; margin-top:20px; font-size:12px; color:var(--ob-tinta-2)}

/* pie con botón continuar */
.ob-pie{position:sticky; bottom:0; z-index:2; width:100%; max-width:560px; display:flex; justify-content:center; padding:22px 0 0; margin-top:auto}
.ob-continuar{width:100%; max-width:420px; border:0; border-radius:99px; padding:16px 22px; font:inherit; font-size:16px; font-weight:700; color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(180deg,#0b7a58,#05664a); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 16px 34px -12px rgba(5,102,74,.7); transition:transform .14s var(--ob-ease), box-shadow .16s, opacity .16s}
.ob-continuar:hover{background:linear-gradient(180deg,#0d8862,#066f51)}
.ob-continuar:active{transform:scale(.98)}
.ob-continuar:disabled{background:#cfd7d2; box-shadow:none; cursor:not-allowed; color:#fff}

@media (max-width:560px){
  .ob-antes,.ob-gen-pasos{grid-template-columns:1fr}
  .ob-cardop{grid-template-columns:auto 1fr; }
  .ob-flecha{display:none}
  .ob-hora input[type=time]{font-size:30px}
}

/* (el panel y la aplicación viven en css/app.css) */

/* Antes / Con JobApply, versión con fotos y animación */
.ob-card.ob-tipo-antes{max-width:820px}
.ob-antes.v2{grid-template-columns:1fr auto 1fr; align-items:stretch; gap:14px}
.ob-antes.v2 .ob-ad{padding:14px 14px 16px; display:flex; flex-direction:column; gap:12px}
.ob-ad-foto{position:relative; height:190px; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#dfe5e2,#c9d3ce)}
.ob-ad-foto img{width:100%; height:100%; object-fit:cover; display:block}
.ob-ad.malo .ob-ad-foto img{filter:grayscale(.85) contrast(.95) brightness(.95)}
.ob-ad.bueno .ob-ad-foto{background:linear-gradient(135deg,#dff3ea,#cfe4ff)}
.ob-ad-cara{position:absolute; top:10px; right:10px; width:38px; height:38px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:22px; box-shadow:0 8px 20px -8px rgba(0,0,0,.4); animation:fx-pop .4s cubic-bezier(.34,1.56,.64,1) .5s both}
.ob-ad-logos{position:absolute; left:10px; bottom:10px; display:flex; gap:6px; flex-wrap:wrap}
.ob-ad-logos s,.ob-ad-logos b{font-size:11.5px; font-weight:700; padding:5px 9px; border-radius:99px; background:rgba(255,255,255,.92); color:#6b7280; text-decoration:line-through; box-shadow:0 6px 14px -8px rgba(0,0,0,.35)}
.ob-ad-logos b{text-decoration:none; color:#05664a; display:inline-flex; gap:4px; align-items:center}
.ob-ad-burbuja{position:absolute; right:10px; display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; color:#05664a; background:#fff; border-radius:99px; padding:5px 10px; box-shadow:0 10px 24px -10px rgba(5,60,40,.5); opacity:0; animation:ob-burbuja 6s ease-in-out infinite}
.ob-ad-burbuja.b1{top:56px; animation-delay:.6s}.ob-ad-burbuja.b2{top:56px; animation-delay:2.6s}.ob-ad-burbuja.b3{top:56px; animation-delay:4.6s}
@keyframes ob-burbuja{0%{opacity:0; transform:translateY(16px) scale(.9)}8%{opacity:1; transform:translateY(0) scale(1)}28%{opacity:1; transform:translateY(-6px)}36%{opacity:0; transform:translateY(-30px) scale(.95)}100%{opacity:0}}
.ob-ad-flecha{align-self:center; width:40px; height:40px; border-radius:50%; background:#fff; border:1px solid rgba(5,60,40,.12); display:grid; place-items:center; color:var(--ob-acento); font-size:20px; box-shadow:var(--ob-borde-luz), 0 12px 26px -14px rgba(5,60,40,.5); animation:fx-nudge 1.2s ease-in-out infinite}
.ob-antes.v2 .ob-ad ul{margin:0; padding-left:18px}
.ob-antes.v2 .ob-ad li{animation:fx-up .5s cubic-bezier(.23,1,.32,1) both}
.ob-antes.v2 .ob-ad li:nth-child(1){animation-delay:.5s}.ob-antes.v2 .ob-ad li:nth-child(2){animation-delay:.7s}.ob-antes.v2 .ob-ad li:nth-child(3){animation-delay:.9s}
.ob-ad.bueno{box-shadow:var(--ob-borde-luz), 0 30px 60px -30px rgba(5,102,74,.55); animation:fx-in-right .36s cubic-bezier(.23,1,.32,1) both, fx-glow 1.6s ease-in-out 1s infinite alternate}
.ob-hoy{display:flex; align-items:center; justify-content:center; gap:10px; margin:18px auto 0; font-size:14px; color:var(--ob-tinta-2); background:#fff; border:1px solid rgba(5,60,40,.10); border-radius:99px; padding:9px 16px; width:max-content; max-width:100%; box-shadow:var(--ob-borde-luz), 0 10px 26px -18px rgba(5,60,40,.4); animation:fx-up .5s .8s both}
.ob-hoy b{color:var(--ob-acento); font-size:16px; font-variant-numeric:tabular-nums}
.ob-hoy .pn-feed-punto{width:8px;height:8px;border-radius:50%;background:var(--ob-acento);position:relative}
.ob-hoy .pn-feed-punto::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--ob-acento);opacity:.6;animation:fx-ping 1.4s cubic-bezier(0,0,.2,1) infinite}
.ob-logos{margin-top:16px; max-width:820px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); overflow:hidden}
.ob-logos .lp-cinta-tira{display:flex; gap:10px; width:max-content; animation:lp-cinta 60s linear infinite}
.ob-logos span{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid rgba(5,60,40,.10); border-radius:999px; padding:6px 12px 6px 8px; font-size:12.5px; font-weight:700; white-space:nowrap}
.ob-logos img{width:20px;height:20px;border-radius:5px}
@media (max-width:640px){.ob-antes.v2{grid-template-columns:1fr} .ob-ad-flecha{transform:rotate(90deg); justify-self:center}}

/* ---- Preferencias en ventana flotante: el MISMO diseño de siempre, centrado sobre el panel ---- */
body.prefs-flotante::after{content:''; position:fixed; inset:0; background:rgba(9,20,16,.55); backdrop-filter:blur(3px); z-index:899; animation:ob-fondo-in .2s ease both}
@keyframes ob-fondo-in{from{opacity:0}to{opacity:1}}
body.prefs-flotante #onboarding{position:fixed; inset:auto; top:50%; left:50%; transform:translate(-50%,-50%); width:min(860px,94vw); height:min(86vh,900px); border-radius:24px; overflow:auto; box-shadow:0 40px 90px -40px rgba(0,0,0,.7); z-index:900; animation:ob-flota-in .28s cubic-bezier(.23,1,.32,1) both}
@keyframes ob-flota-in{from{opacity:0; transform:translate(-50%,-46%) scale(.985)}to{opacity:1; transform:translate(-50%,-50%) scale(1)}}
body.prefs-flotante.ob-activo{overflow:hidden}
@media (max-width:820px){body.prefs-flotante #onboarding{width:100vw; height:100vh; border-radius:0; top:0; left:0; transform:none; animation:none}body.prefs-flotante::after{display:none}}