/* La lamina aprobada fija proporciones, composicion y material. */
.shell{container-type:inline-size;width:min(calc((100svh - 38px)*.52174),calc(100vw - 24px));height:auto;aspect-ratio:480/920;min-height:0;max-height:none;max-width:none;margin:12px auto 26px;padding:0;border-radius:clamp(16px,3vw,28px);isolation:isolate;background:var(--glass);box-shadow:inset 0 0 0 2px #fff9,inset 5px 3px 12px #ffffffc9,inset -5px -3px 12px var(--halo),0 4px 14px #1b3d4512}
.shell:after{content:'';position:absolute;inset:2px;border-radius:inherit;pointer-events:none;z-index:4;border:1px solid #fffc;box-shadow:inset 0 3px 7px #fff9,inset 0 -4px 7px #d8edfa99}.screen{position:absolute;inset:0;height:auto;padding:5% 4% 5%;gap:2.4cqw}.screen>h1{font-size:7.4cqw;line-height:1.13;font-weight:550;letter-spacing:-.04em}.button{min-height:44px;padding:2.7cqw 3cqw;font-size:4cqw;gap:2cqw;border-radius:6cqw}.button svg{width:6cqw;height:6cqw}.glass{border:1.5px solid var(--edge);background-color:color-mix(in srgb,var(--glass) 73%,transparent);backdrop-filter:blur(10px) saturate(1.15);-webkit-backdrop-filter:blur(10px) saturate(1.15);box-shadow:inset 0 3px 4px #fffc,inset 3px 0 6px #ffffff8f,inset -3px -4px 8px var(--halo),0 3px 10px #1b3d451c}.shell.glass{background-color:var(--glass)}
.welcome{padding:0;display:block}.welcome .hair-art{inset:0;border-radius:inherit;background-image:url('assets/welcome-luminoso.png');background-size:cover;background-position:center;z-index:0}.welcome:before{display:none}.welcome .wordmark{display:none}.welcome-copy{position:absolute!important;left:8%;right:7%;top:8.2%;padding:0;margin:0;max-width:none;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0}.welcome h1{font-family:Georgia,'Times New Roman',serif;font-size:13.4cqw;font-weight:400;letter-spacing:-.05em;line-height:1.02;text-wrap:initial;margin:0;color:#06101f}.welcome-copy p{font-size:5.45cqw;line-height:1.35;margin:3cqw 0 0;max-width:none;color:#142333}.welcome-actions{position:absolute!important;left:8%;right:8%;bottom:4.6%;margin:0}.welcome-actions .button{width:100%;height:24.7cqw;min-height:0;justify-content:space-between;padding:3.5cqw 5.2cqw;font-size:10cqw;font-weight:450;letter-spacing:-.035em;background:linear-gradient(115deg,#ffffff80,#eff7ff69 55%,#ffffff87);border:2px solid #ffffffed;border-radius:10cqw;color:#0b1629;box-shadow:inset 0 4px 9px #ffffffe0,inset 3px 0 6px #ffffffa8,inset -3px -4px 10px #d9ecfa99,0 5px 12px #48697936;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.welcome-actions .button [data-icon]{display:grid;place-items:center;width:18cqw;height:18cqw;flex-shrink:0;border-radius:50%;color:#fff;border:1px solid #ffffffc9;background:radial-gradient(circle at 30% 22%,#a7b9a4,#839b85 65%,#bfd0bb);box-shadow:inset 0 2px 3px #fff9,0 2px 6px #37514044}.welcome-actions .button svg{width:10cqw;height:10cqw;stroke-width:2}.welcome-actions p{margin:5.4cqw 0 0;padding:0;background:none;border:0;border-radius:0;font-size:3.9cqw;color:#0c1729;text-shadow:0 1px 3px #fff8}
.demo-footer{position:fixed;left:0;right:0;bottom:3px;width:100%;padding:0;background:none;border-radius:0;font-size:11px;color:var(--ink);z-index:1}.shell:not(:has(.welcome:not([hidden]))) .demo-footer{position:fixed}.capture .camera-preview{min-height:0;flex:1;border-radius:4.5cqw}.capture-indicator{font-size:3.5cqw;padding:1.8cqw 3cqw;bottom:2.5cqw}.capture-indicator svg{width:4.6cqw;height:4.6cqw}.framing{inset:5% 4% 15%}.framing i{width:11cqw;height:11cqw}.count-panel{padding:3cqw;min-height:0;height:22%;display:flex;flex-direction:column;justify-content:center;border-radius:7cqw}.count{width:19cqw;height:19cqw;font-size:14cqw;flex-shrink:0;border-width:1.5cqw;border-top-color:#a8b9aa;border-right-color:#a8b9aa;border-left-color:#fff;border-bottom-color:#fff;box-shadow:0 0 0 1px #cbd9cf,inset 0 0 0 1px #fffc;color:var(--ink)}.count-panel p{font-size:4.5cqw;margin:2.5cqw 0 0}.capture #cancel{min-height:13cqw}.choose{gap:2.2cqw}.choose .selection-preview{flex:0 0 24%;min-height:0;max-height:none;border-radius:5cqw;border:2px solid #fff9;box-shadow:inset 0 0 8px #fff6}.choose legend{font-size:4.8cqw;line-height:1.1;margin-bottom:1.8cqw}.length-options,.texture-options{gap:1.7cqw}.length-option{flex-direction:column;gap:1.2cqw;min-height:19cqw;padding:2cqw 1cqw;font-size:3.8cqw;border-radius:5.3cqw}.length-option svg{width:8cqw;height:8cqw;color:#667075}.texture-option{min-height:26cqw;padding:1cqw 1cqw 1.5cqw;font-size:3.7cqw;border-radius:5cqw}.texture-option .photo{height:20cqw;border-radius:4cqw;margin-bottom:1.5cqw}.option[aria-pressed=true]{background-color:color-mix(in srgb,var(--selected) 70%,transparent);box-shadow:inset 0 0 0 1px var(--accent),inset 0 0 8px #ffffffa8,0 0 0 2px #ffffffc9}.option[aria-pressed=true]:after{font-size:3cqw;right:1.5cqw;top:1cqw}.color-option{font-size:3.4cqw;min-height:18cqw;padding:1.3cqw;border-radius:4cqw}.color-option i{width:12cqw;height:12cqw;border:1px solid #fff;margin-bottom:1.5cqw;background-image:repeating-linear-gradient(72deg,#ffffff1f 0px,#00000018 2px,transparent 3px,transparent 5px);box-shadow:inset 0 0 8px #1b111644}.color-option[aria-pressed=true]{outline:1px solid var(--accent);background:transparent}.color-option[aria-pressed=true] i{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}.demo-detail{font-size:2.7cqw;line-height:1.2}.choose .actions{margin-top:auto;gap:2cqw}.choose .actions .button{font-size:3.6cqw;min-height:14cqw;padding:2cqw;gap:1.6cqw}.choose #generate{background:linear-gradient(135deg,#aec0ad,#68866f 65%,#a6baa4);color:white;border-color:#fffd}.result .result-note{font-size:2.8cqw}.result .text-button{font-size:3.5cqw;min-height:10cqw}.result .actions{gap:2cqw}.result canvas{border-radius:4cqw}.settings-access{z-index:10}
[data-theme=nocturno] .welcome .hair-art{background-image:url('assets/welcome-nocturno.png')}[data-theme=nocturno] .welcome-copy{top:47%;left:7%;right:5%}[data-theme=nocturno] .welcome h1{font-family:'Segoe UI',Arial,sans-serif;font-weight:650;font-size:12.6cqw;line-height:1.03;letter-spacing:-.045em;color:#fff}[data-theme=nocturno] .welcome-copy p{font-size:4.2cqw;color:#d5e5ed;margin-top:3cqw}[data-theme=nocturno] .welcome-copy p br{display:none}[data-theme=nocturno] .welcome-actions{bottom:4.3%;left:7%;right:7%}[data-theme=nocturno] .welcome-actions .button{height:24cqw;font-size:10cqw;font-weight:600;color:#fff;background:linear-gradient(130deg,#183b4c8c,#05141fb5);border-color:#aee8ff;box-shadow:inset 0 3px 8px #c5efff80,inset 3px 0 7px #a0e3ff77,inset -3px -4px 12px #4ab1dd55,0 0 5px #78d6ff80}[data-theme=nocturno] .welcome-actions .button [data-icon]{background:none;border:0;box-shadow:none;color:white}[data-theme=nocturno] .welcome-actions p{color:#d9e9f3;text-shadow:none}[data-theme=nocturno] .count{border-right-color:#67bdde;border-top-color:#67bdde;border-left-color:#173341;border-bottom-color:#173341}[data-theme=nocturno] .choose #generate{background:linear-gradient(130deg,#274f64,#092132);color:#fff}[data-theme=nocturno] .length-option svg{color:#e4f2f8}
[data-theme=editorial] .welcome .hair-art{background-image:url('assets/welcome-editorial.png')}[data-theme=editorial] .welcome-copy{top:5%;left:9%;right:3%}[data-theme=editorial] .welcome h1{font-size:14cqw;line-height:1.06;color:#fff;font-weight:400;letter-spacing:-.055em}[data-theme=editorial] .welcome-copy p{font-size:4.5cqw;color:white;margin-top:3cqw;text-shadow:0 1px 3px #4e382655}[data-theme=editorial] .welcome-copy p br{display:none}[data-theme=editorial] .welcome-actions .button{height:19cqw;border-radius:12cqw;justify-content:center;gap:18cqw;font-size:8cqw;background:linear-gradient(110deg,#fff8,#e9d6ba6e);color:#272b2b}[data-theme=editorial] .welcome-actions .button [data-icon]{width:9cqw;height:9cqw;background:none;border:0;box-shadow:none;color:#2c3437}[data-theme=editorial] .welcome-actions .button svg{width:8cqw;height:8cqw}[data-theme=editorial] .welcome-actions p{color:white;text-shadow:0 1px 3px #2f201d88}[data-theme=editorial] .screen>h1{font-weight:400;font-size:8.1cqw}[data-theme=editorial] .choose #generate{background:linear-gradient(120deg,#b9a17c,#dfcaa9);color:#fff}
[data-effects=light] .glass{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 2px 4px #fff9;background-color:var(--panel)}[data-effects=light] .welcome-actions .button{backdrop-filter:none;-webkit-backdrop-filter:none;background-color:var(--panel)}
@media(prefers-reduced-transparency:reduce){.glass{backdrop-filter:none;background-color:var(--panel)}}

/* Atmosfera del material de la lamina, por debajo de controles nativos. */
.capture,.choose{isolation:isolate;background:linear-gradient(110deg,#ffffff66,transparent 38%,#d2e1e630)}
.capture:before,.choose:before{content:'';position:absolute;inset:-12%;z-index:-1;pointer-events:none;background:url('assets/welcome-luminoso.png') center/cover;filter:blur(26px) saturate(.45);opacity:.17}
[data-theme=nocturno] .capture:before,[data-theme=nocturno] .choose:before{background-image:url('assets/welcome-nocturno.png');opacity:.2}
[data-theme=nocturno] .capture,[data-theme=nocturno] .choose{background:linear-gradient(120deg,#8bd7ff15,transparent 40%,#071c2980)}
[data-theme=editorial] .capture:before,[data-theme=editorial] .choose:before{background-image:url('assets/welcome-editorial.png');opacity:.15}
[data-effects=light] .capture:before,[data-effects=light] .choose:before{display:none}
/* Pulido de material y seleccion ampliada, 22/10. */
:root{--heading:'Segoe UI Variable Display','Segoe UI',sans-serif}
.screen>h1{font-size:6.6cqw;font-weight:500;letter-spacing:-.035em;text-align:left;margin:0 1cqw}
.welcome-actions .button{height:25.8cqw;border-radius:13cqw;padding:3cqw 4cqw 3cqw 7cqw;font-size:9.7cqw;font-weight:500;letter-spacing:-.045em;background:linear-gradient(120deg,#ffffff5c,#edf4fc38 52%,#ffffff73);border:1px solid #fff;box-shadow:inset 0 3px 5px #fffffff0,inset 4px 0 8px #ffffffad,inset -3px -4px 9px #e7f4ffb3,0 6px 12px #233e4724;backdrop-filter:blur(19px) saturate(.72);-webkit-backdrop-filter:blur(19px) saturate(.72)}
.welcome-actions .button [data-icon]{position:relative;width:18.4cqw;height:18.4cqw;border:1px solid #ffffff91;background:linear-gradient(145deg,#c2d1b985,#739075b0 70%,#d6e4ce7d);box-shadow:inset 1px 3px 6px #ffffffa6,inset -2px -3px 6px #405f4433,0 4px 9px #36563a29;backdrop-filter:blur(8px)}
.welcome-actions .button [data-icon]:after{content:'';position:absolute;inset:3px;border:1px solid #ffffff30;border-radius:inherit;pointer-events:none}
.welcome-actions .button svg{width:9cqw;height:9cqw;stroke-width:1.55;filter:drop-shadow(0 1px 1px #334c3520)}
.choose{padding:5% 4% 4%;gap:2.5cqw}.choose .selection-preview{flex:0 0 29%;border-radius:5cqw;background-color:#e9e0d6;background-repeat:no-repeat;box-shadow:inset 0 0 16px #ffffff66;border:1px solid #fff9}
.choose legend{display:flex;width:100%;align-items:center;justify-content:space-between;font-size:4cqw;font-weight:500;letter-spacing:-.01em;margin-bottom:1.4cqw}
.rail-controls{display:flex;gap:1cqw}.rail-controls button{width:8cqw;height:7cqw;min-height:30px;border:1px solid #ffffff8f;border-radius:50%;background:#ffffff28;font-size:6cqw;line-height:1;display:grid;place-items:center;font-weight:300}
.length-options,.texture-options,.color-options{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 4cqw)/3);gap:2cqw;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 1px 3px}
.length-options::-webkit-scrollbar,.texture-options::-webkit-scrollbar,.color-options::-webkit-scrollbar{display:none}.option,.color-option{scroll-snap-align:start}
.length-option{min-height:15cqw;border-radius:4cqw;font-size:3.5cqw;gap:1cqw;padding:1.5cqw}.length-option svg{height:7cqw;width:7cqw}.length-option .hair-pixie{transform:scaleY(.74)}.length-option .hair-extra{transform:scaleY(1.12)}
.texture-option{min-height:23cqw;border-radius:4cqw;padding:.8cqw;font-size:3.4cqw}.texture-option .photo{height:17cqw;border-radius:3.4cqw;margin-bottom:1cqw}
.color-options{grid-auto-columns:calc((100% - 6cqw)/4)}.color-option{min-height:15.5cqw;font-size:3cqw;padding:1cqw;border-radius:3cqw}.color-option i{width:10cqw;height:10cqw;margin-bottom:1cqw;background-image:repeating-linear-gradient(80deg,#ffffff0d 0px,#00000012 1px,transparent 2px,transparent 4px)}
.option[aria-pressed=true]{background:linear-gradient(130deg,#eef4ef80,#9db5a04a);box-shadow:inset 0 0 0 1px var(--accent),inset 0 2px 5px #fffc,0 0 0 1px #fffd}
.demo-detail{font-size:2.6cqw}.choose .actions .button{border-radius:7cqw;min-height:13cqw;font-weight:500}.choose .actions{margin-top:auto}
.result{padding:3.5% 4% 3%;gap:1.5cqw}.result canvas{object-position:center top;border-radius:4.6cqw;flex:1;min-height:0}.result .actions .button{font-size:3.9cqw;font-weight:500;min-height:13cqw}.result .text-button{font-size:3.1cqw;min-height:8cqw;text-decoration:none;color:var(--muted)}.result .result-note{font-size:2.5cqw}
[data-theme=editorial] .screen>h1{font-size:7.3cqw}[data-theme=editorial] .welcome h1{font-size:14cqw}
[data-theme=nocturno] .rail-controls button{background:#102b3b66;border-color:#8ad7f54f}[data-theme=nocturno] .option[aria-pressed=true]{background:linear-gradient(120deg,#3d667a80,#102b3bb0)}
.result canvas{flex:0 1 auto;width:100%;height:auto;max-height:calc(100% - 30cqw)}.result .actions{margin-top:auto}