/* Ricaz - invitación a probar el Renderizador en la primera oferta */
.app[data-tab=offer] #p-offer h1{font-size:clamp(21px,6.2vw,25px);line-height:1.08;margin:8px 0 0}
.app[data-tab=offer] #p-offer .lead{font-size:11.5px;line-height:1.3;margin-top:3px;color:var(--mute)}
.app[data-tab=offer] #p-offer .try{display:none}
.app[data-tab=offer] #hero-cmp{margin-top:8px}
.app[data-tab=offer] #hero-cmp .cmp{aspect-ratio:auto!important;max-height:none;height:clamp(250px,calc(100dvh - 410px),390px)}
.app[data-tab=offer] #hero-cmp .cmp img{object-position:center 40%}
.app[data-tab=offer] #hero-cmp .cmp input[type=range]{z-index:2}
.app[data-tab=offer] #hero-cmp .cmp-knob{top:26%}
.app[data-tab=offer] #hero-cmp .cmp .lab{top:38px;bottom:auto;font-size:9.5px;padding:3px 8px}
.app[data-tab=offer] #hero-cmp .cmp .lab.l{left:10px;right:auto}
.app[data-tab=offer] #hero-cmp .cmp .lab.r{right:10px;left:auto}
.app[data-tab=offer] #hero-cmp .aibadge{z-index:3;top:10px;max-width:calc(100% - 20px)}
.oi-banner{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:46px 12px 12px;border-radius:0 0 22px 22px;background:linear-gradient(180deg,rgba(15,23,42,0) 0%,rgba(15,23,42,.72) 42%,rgba(15,23,42,.94) 100%);color:#fff;pointer-events:none}
.oi-chip{align-self:flex-start;font-size:9.5px;font-weight:900;letter-spacing:.08em;color:#fff;background:linear-gradient(180deg,#FB923C,var(--hot));border-radius:999px;padding:2px 8px}
.oi-h{margin:0;font-size:clamp(22px,6vw,25px);font-weight:900;letter-spacing:-.02em;line-height:1.1;color:#fff}
.oi-s{margin:0;font-size:12px;line-height:1.3;font-weight:600;color:#E2E8F0}
.oi-btn{pointer-events:auto;position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:56px;margin-top:3px;border-radius:17px;background:linear-gradient(180deg,#FB923C,var(--hot));color:#fff;font-size:16px;font-weight:900;letter-spacing:-.01em;box-shadow:0 8px 20px rgba(234,88,12,.4);transition:transform .15s}
.oi-btn:active{transform:scale(.97)}
.oi-btn svg,.oi-dlg svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oi-btn svg{width:22px;height:22px}
.offer-how{height:64px;width:100%;margin-top:8px;padding:6px 8px;background:#fff;border:1px solid var(--line);border-radius:15px;color:var(--navy)}
.offer-how>b{display:block;font-size:10px;line-height:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin-bottom:3px}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.how-step{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.how-step>span{display:flex;align-items:center;gap:4px}
.how-step svg{width:16px;height:16px;fill:none;stroke:var(--hot);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.how-step i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--navy);color:white;font-size:10px;font-style:normal}
.how-step strong{font-size:11px;line-height:13px;font-weight:800}
/* pulso de la pestaña */
.tab#tab-studio.oi-pulse{animation:oipulse 1.1s ease-in-out 1}
@keyframes oipulse{0%,100%{transform:scale(1)}40%{transform:scale(1.045)}}
/* bienvenida */
.oi-dlg{position:fixed;inset:auto 0 0;margin:0 auto;width:min(100%,500px);max-width:100%;max-height:92vh;max-height:92dvh;border:0;padding:0;border-radius:24px 24px 0 0;background:#fff;color:var(--ink);font-family:inherit;overflow:hidden;box-shadow:0 -12px 40px rgba(15,23,42,.3)}
.oi-dlg[open]{display:flex;flex-direction:column;animation:oiup .38s cubic-bezier(.22,1,.36,1)}
.oi-dlg::backdrop{background:rgba(15,23,42,.7)}
@keyframes oiup{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.oi-scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.oi-pic{position:relative;height:clamp(150px,26dvh,230px);background:#CBD5E1}
.oi-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.oi-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,0) 45%,rgba(15,23,42,.8))}
.oi-pic .oi-chip{position:absolute;left:14px;bottom:12px;z-index:1}
.oi-x{position:absolute;right:10px;top:10px;z-index:2;width:48px;height:48px;border-radius:50%;background:rgba(15,23,42,.7);color:#fff;display:grid;place-items:center}
.oi-x svg{width:22px;height:22px}
.oi-body{padding:16px 18px max(16px,env(safe-area-inset-bottom))}
.oi-body h2{margin:0;font-size:24px;font-weight:900;letter-spacing:-.025em;line-height:1.1;color:var(--navy)}
.oi-body p{margin:8px 0 0;font-size:14.5px;line-height:1.4;font-weight:600;color:#334155}
.oi-steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.oi-steps li{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;background:#FFF1E7;border-radius:15px;font-size:12.5px;font-weight:800;color:var(--navy)}
.oi-steps svg{width:24px;height:24px;color:var(--hot)}
.oi-go{margin-top:16px}
.oi-no{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:4px;font-size:14px;font-weight:800;color:var(--mute)}
.oi-dlg button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
@media(max-height:700px){.oi-pic{height:130px}.oi-body h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){.tab#tab-studio.oi-pulse{animation:none}.oi-dlg[open]{animation:none}.oi-scroll{scroll-behavior:auto}}
/* ---- A&E 24 dark overrides ---- */
.offer-how{background:#141922;border-color:#232B37}
.offer-how b{color:#9AA6B2}
.how-step{color:#E8EEF4}
.how-step span{background:#1F2733}
.how-step i{background:#F05A28;color:#fff}
.how-step svg{stroke:#FDBA74}
.oi-dlg{background:#12161D;color:#F2F5F8}
.oi-dlg .oi-body h2{color:#F2F5F8}
.oi-dlg .oi-body p{color:#9AA6B2}
.oi-steps li{color:#C7D3DF}
.oi-steps li svg{stroke:#FDBA74}
.oi-no{color:#9AA6B2}
.oi-steps li{background:rgba(240,90,40,.14);color:#FDBA74}
