.ai-logo-lab{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:34px;align-items:center;margin-top:42px;padding:34px;border:1px solid #cbd8ef;border-radius:20px;background:radial-gradient(circle at 8% 0,#dbeafe 0,transparent 35%),linear-gradient(145deg,#f8fbff,#eef4ff);box-shadow:0 18px 50px #123c9112;overflow:hidden}
.ai-logo-lab::before{content:"";position:absolute;top:-120px;right:31%;width:260px;height:260px;border:1px solid #2563eb22;border-radius:50%;box-shadow:0 0 0 36px #2563eb0b,0 0 0 72px #2563eb08;pointer-events:none}
.ai-logo-copy{position:relative;z-index:1;max-width:600px}
.ai-logo-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 10px;border:1px solid #2563eb26;border-radius:999px;background:#fff;color:#1755bf;font-size:11px;font-weight:850;letter-spacing:1px;text-transform:uppercase}
.ai-logo-badge i{color:#7c3aed}.ai-logo-copy h3{max-width:520px;margin:0 0 10px;color:#0f274d;font-size:clamp(24px,3vw,36px);line-height:1.08;letter-spacing:-.8px}
.ai-logo-copy>p{max-width:560px;margin:0;color:#526581;font-size:15px;line-height:1.65}
.ai-logo-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px}.ai-logo-actions .primary-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:220px}.ai-logo-actions .primary-button:disabled{cursor:wait;opacity:.72}
.ai-logo-download{display:inline-flex;align-items:center;gap:7px;padding:11px 13px;border:1px solid #b9cae7;border-radius:9px;background:#fff;color:#174fba;font-size:13px;font-weight:800;text-decoration:none}
.ai-logo-copy>small{display:block;margin-top:12px;color:#6b7e99;font-size:11px}.ai-logo-error{display:flex;align-items:flex-start;gap:8px;margin-top:14px!important;padding:10px 12px;border:1px solid #fecaca;border-radius:9px;background:#fff1f2;color:#a21c2c!important;font-size:13px!important;line-height:1.4!important}
.ai-logo-copy>.ai-logo-text-quality{display:flex;align-items:flex-start;gap:7px;margin-top:8px;padding:8px 10px;border:1px solid #a7f3d0;border-radius:8px;background:#ecfdf5;color:#087454;font-size:11px;line-height:1.4}
.ai-logo-preview{position:relative;aspect-ratio:1;min-width:0;border:8px solid #fff;border-radius:18px;background:linear-gradient(145deg,var(--ai-primary),color-mix(in srgb,var(--ai-primary) 78%,var(--ai-accent)));box-shadow:0 16px 45px #0f2d6524;overflow:hidden}
.ai-logo-preview::after{content:"CONCEITO IA";position:absolute;z-index:4;top:14px;right:14px;padding:5px 7px;border:1px solid #ffffff4f;border-radius:999px;background:#0c17337a;color:#fff;font-size:8px;font-weight:900;letter-spacing:1.2px;backdrop-filter:blur(8px)}
.ai-logo-preview>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ai-logo-name{position:absolute;z-index:3;right:0;bottom:0;left:0;display:grid;gap:4px;padding:68px 24px 23px;background:linear-gradient(transparent,#050b1fcc 52%,#050b1ff2);color:#fff;text-align:center}
.ai-logo-name strong{font-size:clamp(22px,3vw,34px);line-height:1.05;letter-spacing:-.4px;text-shadow:0 2px 10px #0008}.ai-logo-name small{font-size:12px;opacity:.82}
.ai-logo-placeholder,.ai-logo-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:36px;color:var(--ai-text);text-align:center}
.ai-logo-placeholder>i{display:grid;place-items:center;width:82px;height:82px;margin-bottom:5px;border:1px solid color-mix(in srgb,var(--ai-accent) 70%,transparent);border-radius:26px;background:color-mix(in srgb,var(--ai-accent) 20%,transparent);color:var(--ai-accent);font-size:34px;transform:rotate(-4deg)}
.ai-logo-placeholder strong,.ai-logo-loading strong{font-size:15px}.ai-logo-placeholder span{font-size:12px;opacity:.72}
.ai-logo-loading{z-index:5;grid-template-columns:minmax(0,1fr);grid-template-rows:128px auto;align-content:center;row-gap:20px;background:linear-gradient(145deg,var(--ai-primary),color-mix(in srgb,var(--ai-primary) 78%,var(--ai-accent)))}.ai-logo-loading>span,.ai-logo-loading>i{grid-area:1/1;align-self:center;justify-self:center}.ai-logo-loading>i{z-index:2;display:grid;place-items:center;width:68px;height:68px;border:1px solid color-mix(in srgb,var(--ai-accent) 55%,transparent);border-radius:22px;background:color-mix(in srgb,var(--ai-accent) 14%,transparent);color:var(--ai-accent);font-size:30px;animation:ai-spark 1.4s ease-in-out infinite}.ai-logo-loading>span{position:relative;width:118px;height:118px;border:2px solid color-mix(in srgb,var(--ai-accent) 65%,transparent);border-radius:44% 56% 52% 48%;box-shadow:0 0 0 12px color-mix(in srgb,var(--ai-accent) 7%,transparent);animation:ai-orbit 2.6s linear infinite}.ai-logo-loading strong{z-index:2;grid-row:2;max-width:280px;margin:0;opacity:.9;font-size:14px;line-height:1.45}
@keyframes ai-orbit{to{transform:rotate(360deg)}}@keyframes ai-spark{50%{transform:scale(1.15);filter:drop-shadow(0 0 15px var(--ai-accent))}}
@media(max-width:830px){.ai-logo-lab{grid-template-columns:1fr;padding:25px}.ai-logo-preview{width:min(100%,420px);justify-self:center}}
@media(max-width:520px){.ai-logo-lab{margin-top:28px;padding:20px;border-radius:15px}.ai-logo-actions{align-items:stretch;flex-direction:column}.ai-logo-actions .primary-button,.ai-logo-download{width:100%}.ai-logo-preview{border-width:5px;border-radius:14px}}