/* Waves Studio: «Cómo trabajamos» interactivo. Paleta: tinta #0A0B10, blanco, cian #22D3EE / #A3EFF4. Solo actúa con .how.pc */
.how.pc{--c:#A3EFF4;--c2:#22D3EE;--ink:#0A0B10}
.how.pc .how-bg .glow{background:radial-gradient(closest-side,rgba(34,211,238,.2),rgba(163,239,244,.06) 55%,transparent);transition:none}
.how.pc .how-rail i{background:var(--c)}
section.how.pc .how-scroll{height:300vh}
section.how.pc .how-grid{grid-template-columns:minmax(0,4.2fr) minmax(0,6.8fr);gap:clamp(28px,3.4vw,56px);align-items:center}
section.how.pc .how-stage{aspect-ratio:auto;width:100%;max-width:none;justify-self:stretch;display:flex;flex-direction:column;gap:10px;perspective:none}
@media(max-height:760px) and (min-width:861px){section.how.pc .how-scroll{height:auto}section.how.pc .how-sticky{position:relative;height:auto;padding-block:90px}}

/* pasos */
.pc .how-steps{margin:10px 0 0}
.pc-s{border-top:1px solid rgba(255,255,255,.1);opacity:1!important;transform:none!important;visibility:visible!important}
.pc-s:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.pc-sb{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:6px 0;cursor:pointer;color:#8a8e98;transition:color .3s}
.pc-sb:focus-visible{outline:2px solid var(--c);outline-offset:3px;border-radius:6px}
.pc-sb .n{font:12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;width:26px;color:#8a8e98}
.pc-sb .t{font-size:clamp(17px,1.5vw,21px);font-weight:400;letter-spacing:-.02em}
.pc-sb:hover{color:#fff}
.pc-s.done .pc-sb{color:#c9ccd3}
.pc-s.on .pc-sb{color:#fff}.pc-s.on .pc-sb .n{color:var(--c)}
.pc-sd{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1),visibility 0s .5s}
.pc-sd>.in{overflow:hidden;min-height:0;padding-left:40px}
.pc-s.on .pc-sd{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.pc-sd .lead{margin:0 0 10px;font-size:15px;line-height:1.45;color:#c4c7ce;max-width:46ch}
.pc-sd dl{margin:0 0 14px;display:grid;gap:8px}
.pc-sd dl>div{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:baseline}
.pc-sd dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:600}
.pc-sd dd{margin:0;font-size:14px;line-height:1.4;color:#f1f2f4}
.pc-prop{margin:0 0 14px;font-size:13px;color:#c4c7ce}
.pc-prop b{background:var(--c);color:var(--ink);font-size:12px;letter-spacing:.1em;padding:2px 6px;border-radius:4px;margin-right:6px}

/* ===== dispositivo: profundidad, luz y reflejo ===== */
.pc-dev{position:relative;width:100%;max-width:min(760px,calc((100vh - 330px)*1.08));margin:0 auto;container-type:inline-size;aspect-ratio:16/10.3;perspective:1500px;perspective-origin:50% 40%}
.pc-water{position:absolute;left:-5%;width:110%;top:66%;height:58%;pointer-events:none;display:block}
.pc-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 55%;
 transform:rotateX(4deg) rotateY(calc(-12deg + var(--p,0)*17deg)) translateZ(0);transition:transform .35s cubic-bezier(.22,1,.36,1);}
.pc-edge{position:absolute;inset:0;border-radius:18px;pointer-events:none}
.pc-edge.e1{transform:translateZ(-5px);background:linear-gradient(135deg,#566274,#2a3140)}
.pc-edge.e2{transform:translateZ(-10px);background:#1b212c}
.pc-edge.e3{transform:translateZ(-16px);background:#0a0d13;box-shadow:0 30px 60px -12px rgba(0,0,0,.85),0 0 80px -10px rgba(34,211,238,.5)}
.pc-glass{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
 background:#0a0c12;border:1px solid rgba(255,255,255,.22);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 5px rgba(255,255,255,.03),0 0 0 1px rgba(0,0,0,.6)}
.pc-bar{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);flex:none;position:relative;z-index:5}
.pc-bar .dots{display:flex;gap:5px}.pc-bar .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.pc-bar .url{flex:1;min-width:0;max-width:240px;margin:0 auto;text-align:center;font:12px/22px ui-monospace,Menlo,monospace;color:#c4c7ce;background:rgba(255,255,255,.06);border-radius:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-dev[data-lv="3"] .pc-bar .url::before{content:"";display:inline-block;width:7px;height:9px;margin-right:6px;border-radius:2px;background:var(--c);vertical-align:-1px}
.pc-bar .ex{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#a5a9b3;border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:0 7px;line-height:20px}
.pc-bar .lvl{font-size:12px;font-weight:600;color:var(--ink);background:var(--c);border-radius:11px;padding:0 9px;line-height:22px;white-space:nowrap}
.pc-screen{position:relative;flex:1;min-height:0}
.pc-sheen{position:absolute;inset:0;pointer-events:none;z-index:9;mix-blend-mode:screen;background:linear-gradient(112deg,transparent 0%,rgba(255,255,255,.13) 22%,rgba(163,239,244,.08) 30%,transparent 42%);background-size:260% 100%;background-position:calc(100% - var(--p,0)*100%) 0}
.pc-sweep{position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0;background:linear-gradient(100deg,transparent 35%,rgba(163,239,244,.28) 50%,transparent 65%);transform:translateX(-100%)}
.pc-dev[data-lv="3"] .pc-sweep{animation:pcSweep 1.6s .5s cubic-bezier(.4,0,.2,1) 1 both}
@keyframes pcSweep{0%{opacity:1;transform:translateX(-100%)}100%{opacity:0;transform:translateX(100%)}}
.pc-refl{position:absolute;left:8%;right:8%;bottom:-6%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(34,211,238,.35),transparent);filter:blur(10px);opacity:.7;pointer-events:none}

/* ===== pantalla: club de viajes de ejemplo (todo en em: 1em = 1 % del ancho) ===== */
.pc-scr{position:absolute;inset:0;font-size:1cqw;line-height:1.25;color:#eef0f3;display:flex;flex-direction:column;overflow:hidden;background:#090b10}
.pc-scr *{box-sizing:border-box}
.pc-scr svg{display:block;flex:none}
.s-bg{position:absolute;inset:0;pointer-events:none}
.s-bg i{position:absolute;inset:0;transition:opacity 1s}
.s-bg .g1{background-image:linear-gradient(rgba(163,239,244,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(163,239,244,.07) 1px,transparent 1px);background-size:2.4em 2.4em;opacity:1}
.s-bg .g2{background:radial-gradient(70% 90% at 88% -10%,rgba(34,211,238,.24),transparent 62%),radial-gradient(60% 70% at 0 105%,rgba(34,211,238,.1),transparent 60%),#0a0d14;opacity:0}
.pc-dev:not([data-lv="0"]) .s-bg .g2{opacity:1}
.pc-dev:not([data-lv="0"]) .s-bg .g1{opacity:0}
.s-h,.s-body{position:relative;z-index:2}

/* texto que pasa de barra gris a texto real */
.tx{background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)) 0 50%/100% 0 no-repeat;border-radius:.3em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
 transition:color .7s ease,background-size .6s ease;transition-delay:calc(var(--i,0)*70ms)}
.pc-dev[data-lv="0"] .tx{color:transparent!important;background-size:100% 62%}
.pc-dev[data-lv="0"] .tx *{color:transparent!important}

/* cabecera */
.s-h{flex:none;height:6.6em;display:flex;align-items:center;gap:2em;padding:0 2.4em;border-bottom:1px solid rgba(255,255,255,.1);transition:border-color .6s,background-color .8s;background:rgba(255,255,255,.02)}
.pc-dev[data-lv="0"] .s-h{border-bottom:.12em dashed rgba(163,239,244,.45);background:none}
.s-logo{display:flex;align-items:center;gap:.7em;color:var(--c)}
.s-logo svg{width:2.9em;height:2.9em}
.s-logo b{font-size:1.9em;font-weight:700;letter-spacing:-.03em;color:#fff}
.s-nav{display:flex;gap:2em;font-size:1.45em;color:#c4c8d0;margin-left:1.6em}
.s-sp{flex:1}
.s-bell,.s-user{display:flex;align-items:center;gap:.8em;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transform:translateY(-.8em);transition:max-width .7s cubic-bezier(.22,1,.36,1),opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.f-avisos .s-bell{max-width:4em;opacity:1;transform:none}
.f-area .s-user{max-width:16em;opacity:1;transform:none}
.s-bell{position:relative;width:3.2em;color:#e8eaee}.s-bell svg{width:2.4em;height:2.4em}
.s-bell i{position:absolute;right:.5em;top:.2em;width:.9em;height:.9em;border-radius:50%;background:var(--c2);box-shadow:0 0 0 .2em #0a0d14}
.s-user{font-size:1.45em;color:#fff}
.s-user .av{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;font-style:normal;font-weight:700;font-size:.9em;color:var(--ink);background:linear-gradient(135deg,var(--c),var(--c2));box-shadow:0 0 0 .14em rgba(255,255,255,.25)}
.b1{display:inline-flex;align-items:center;justify-content:center;gap:.6em;flex:none;font-size:1.5em;font-weight:600;color:var(--ink);background:var(--c);border:.08em solid var(--c);border-radius:.8em;padding:.5em 1.1em;white-space:nowrap;transition:background-color .6s,border-color .6s,color .6s,box-shadow .6s;box-shadow:0 .4em 1.6em -.4em rgba(34,211,238,.6)}
.b1.o{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.pc-dev[data-lv="0"] .b1{background:transparent;border:.1em dashed rgba(163,239,244,.6);box-shadow:none}
.pc-dev[data-lv="1"] .b1:not(.o){background:transparent;color:var(--c);box-shadow:none}

/* cuerpo */
.s-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.2em;padding:2.2em 2.4em 2.2em}
.s-l{min-width:0;min-height:0;display:flex;flex-direction:column;gap:1.5em;overflow:hidden}
.s-k{margin:0;align-self:flex-start;font-size:1.35em;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.s-h1{margin:0;font-size:4.3em;line-height:1.06;font-weight:600;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.s-h1 em{font-style:normal;color:var(--c)}
.s-p{margin:0;font-size:1.55em;line-height:1.35;color:#b9bec8;max-width:34em}
.s-btns{display:flex;gap:1em;align-items:center}
.s-pan{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .7s cubic-bezier(.22,1,.36,1),opacity .5s;flex:none}
.f-panel .s-pan{grid-template-rows:1fr;opacity:1}
.s-pan>.in{overflow:hidden;min-height:0}
.pan{display:grid;grid-template-columns:auto auto 1fr;gap:2.2em;align-items:center;padding:1.3em 1.7em;border-radius:1.4em;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);transition:border-color .6s}
.pc-dev[data-lv="0"] .pan{background:none;border:.12em dashed rgba(163,239,244,.45)}
.pan .m b{display:block;font-size:2.5em;letter-spacing:-.03em;font-weight:700;color:#fff;line-height:1}
.pan .m small{display:block;margin-top:.3em;font-size:1.15em;color:#a5aab4}
.pan .m em{font-style:normal;font-size:1.1em;color:var(--c);margin-left:.4em}
.pan .bars{display:flex;align-items:flex-end;gap:.5em;height:3.8em;justify-self:end;width:min(14em,100%)}
.pan .bars i{flex:1;border-radius:.3em .3em 0 0;background:linear-gradient(var(--c),var(--c2));height:var(--h);transform-origin:bottom;transition:transform .8s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--k)*60ms)}
.pc-dev[data-lv="0"] .pan .bars i{background:rgba(255,255,255,.16);transform:scaleY(.3)}
.pc-dev[data-lv="3"] .f-panel .pan .bars i{animation:pcBar 3.2s ease-in-out infinite;animation-delay:calc(var(--k)*.25s)}
@keyframes pcBar{50%{transform:scaleY(.72)}}
.s-dest{flex:1;min-height:9em;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2em}
.d{min-width:0;min-height:0;display:flex;flex-direction:column;gap:.8em;padding:.7em .7em .9em;border-radius:1.5em;background:linear-gradient(170deg,rgba(255,255,255,.08),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.13);transition:border-color .6s,background-color .6s;overflow:hidden}
.pc-dev[data-lv="0"] .d{background:none;border:.12em dashed rgba(163,239,244,.45)}
.d .ph{flex:1;min-height:0;border-radius:1em}
.d .ft{display:flex;align-items:center;gap:.6em;padding:0 .5em;min-width:0}
.d .ft>div{flex:1;min-width:0}
.d b{display:block;font-size:1.4em;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d small{display:flex;align-items:center;gap:.5em;font-size:1.15em;color:#a9aeb8;margin-top:.15em;white-space:nowrap}
.d small svg{width:1.2em;height:1.2em;color:var(--c)}
.d .pr{font-size:1.45em;font-weight:700;color:var(--c);white-space:nowrap}
.d .hrt{position:absolute;right:.8em;top:.8em;z-index:3;display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;background:rgba(10,12,18,.55);color:#fff}
.d .hrt svg{width:1.4em;height:1.4em}
.pc-dev[data-lv="0"] .hrt{background:none;color:rgba(163,239,244,.6)}

/* foto: de recuadro vacío a foto en color, con recorte, escala y desplazamiento */
.ph{position:relative;overflow:hidden;background:#10141c;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .6s;
 background:linear-gradient(to top right,transparent calc(50% - .6px),rgba(163,239,244,.4) 50%,transparent calc(50% + .6px)),linear-gradient(to top left,transparent calc(50% - .6px),rgba(163,239,244,.4) 50%,transparent calc(50% + .6px))}
.pc-dev[data-lv="0"] .ph{background:none;outline:.12em dashed rgba(163,239,244,.5);outline-offset:-.12em}
.pc-dev[data-lv="0"] .ph::before{opacity:1}
.ph .pz{position:absolute;inset:-5%;z-index:1;transform:translate3d(calc((var(--p,0) - .5)*-3.4em),0,0)}
.ph img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;
 transition:clip-path 1.1s cubic-bezier(.77,0,.18,1),transform 1.4s cubic-bezier(.22,1,.36,1),filter 1s ease;transition-delay:calc(var(--i,0)*90ms)}
.pc-dev[data-lv="0"] .ph img{clip-path:inset(46% 46% 46% 46% round 50%);transform:scale(1.3);filter:grayscale(1) brightness(.5)}
.pc-dev[data-lv="1"] .ph img{clip-path:inset(0 0 0 0 round 0);transform:scale(1.14);filter:grayscale(1) contrast(1.08) brightness(.72)}
.pc-dev[data-lv="2"] .ph img{clip-path:inset(0 0 0 0 round 0);transform:scale(1.05);filter:grayscale(0) saturate(1.02)}
.pc-dev[data-lv="3"] .ph img{clip-path:inset(0 0 0 0 round 0);transform:scale(1);filter:saturate(1.1) contrast(1.03)}
.pc-dev[data-lv="0"] .s-r>.ph img{clip-path:inset(0 100% 0 0)}
.ph::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(8,10,15,.78),transparent 52%),linear-gradient(to bottom,rgba(8,10,15,.4),transparent 28%)}
.d .ph::after{background:linear-gradient(to top,rgba(8,10,15,.35),transparent 50%)}

/* columna de la foto grande y funcionalidades que aparecen en vivo */
.s-r{position:relative;min-width:0;min-height:0}
.s-r>.ph{position:absolute;inset:0;border-radius:2em}
.s-r .cap{position:absolute;left:1.8em;right:1.8em;top:1.7em;z-index:4;display:flex;align-items:center;gap:.7em;font-size:1.35em;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.s-r .cap svg{width:1.3em;height:1.3em;color:var(--c)}
.o{position:absolute;z-index:6;opacity:0;transform:translateY(2.2em) scale(.9);pointer-events:none;border-radius:1.5em;
 background:rgba(12,16,24,.74);-webkit-backdrop-filter:blur(.9em) saturate(1.3);backdrop-filter:blur(.9em) saturate(1.3);border:1px solid rgba(255,255,255,.2);
 box-shadow:0 1.6em 3em -1em rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.22);
 transition:opacity .45s ease,transform .8s cubic-bezier(.2,1.3,.35,1),border-color .6s,background-color .6s}
.pc-dev[data-lv="0"] .o{background:rgba(9,11,16,.8);border:.12em dashed rgba(163,239,244,.6);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.f-reservas .o-res,.f-pagos .o-pag,.f-avisos .o-avi,.f-ia .o-ia{opacity:1;transform:none}
.o::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:2px solid var(--c);opacity:0}
.o.nuevo::after{animation:pcPing 1.3s ease-out}
@keyframes pcPing{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.07)}}
.o .okk{position:absolute;right:1em;top:1em;display:none;font-style:normal;font-size:1.05em;font-weight:600;color:var(--c);letter-spacing:.04em}
.pc-dev[data-lv="2"] .o .okk{display:block}
.pc-dev[data-lv="2"] .o-res .okk{top:auto;bottom:.6em}

.o-res{left:1.6em;right:1.6em;bottom:1.6em;padding:1.5em 1.6em}
.o-res h5{margin:0;display:flex;align-items:center;gap:.7em;font-size:1.65em;font-weight:700;color:#fff;letter-spacing:-.01em}
.o-res h5 svg{width:1.3em;height:1.3em;color:var(--c)}
.o-res h5 small{margin-left:auto;font-size:.75em;font-weight:500;color:#aab0ba}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:.5em;margin:1em 0}
.cal i{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;height:4.4em;border-radius:.9em;font-style:normal;font-size:1.25em;color:#d7dae0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:background-color .6s,border-color .6s,color .6s;transition-delay:calc(var(--k)*40ms)}
.cal i span{font-size:.72em;color:#8f95a0}.cal i b{font-weight:700;font-size:1.05em}
.cal i.s{background:linear-gradient(var(--c),var(--c2));border-color:var(--c);color:var(--ink)}.cal i.s span{color:rgba(10,11,16,.65)}
.cal i.r{background:rgba(34,211,238,.28);border-color:rgba(163,239,244,.5);color:#fff}
.pc-dev[data-lv="0"] .cal i{background:none;border:.1em dashed rgba(163,239,244,.45);color:transparent}.pc-dev[data-lv="0"] .cal i span{color:transparent}
.pc-dev[data-lv="3"] .cal i.s{animation:pcPulse 2.4s ease-in-out infinite}
@keyframes pcPulse{50%{box-shadow:0 0 1.8em -.2em rgba(34,211,238,.9)}}
.o-res .row{display:flex;align-items:center;gap:1em}
.o-res .pax{display:flex;align-items:center;gap:.6em;font-size:1.3em;color:#e2e5ea;padding:.5em .9em;border-radius:.8em;border:1px solid rgba(255,255,255,.18)}
.o-res .pax svg{width:1.3em;height:1.3em;color:var(--c)}
.o-res .row .b1{margin-left:auto;font-size:1.4em}
.pc-dev[data-lv="0"] .pax{border:.1em dashed rgba(163,239,244,.45)}

.o-pag,.o-avi{right:1.6em;top:5em;display:flex;align-items:center;gap:1em;padding:.9em 1.4em .9em 1em;max-width:25em}
.o-avi{top:10.4em}
.o-pag .ic,.o-avi .ic{display:grid;place-items:center;width:3em;height:3em;border-radius:50%;flex:none;background:linear-gradient(var(--c),var(--c2));color:var(--ink)}
.o-pag .ic svg,.o-avi .ic svg{width:1.7em;height:1.7em}
.o-pag b,.o-avi b{display:block;font-size:1.4em;font-weight:700;color:#fff}
.o-pag small,.o-avi small{display:block;font-size:1.15em;color:#aab0ba;margin-top:.15em}
.pc-dev[data-lv="0"] .o .ic{background:none;border:.1em dashed rgba(163,239,244,.6);color:rgba(163,239,244,.7)}
.pc-dev[data-lv="3"] .f-pagos .o-pag .ic{animation:pcPulse 2.6s ease-in-out infinite}

.o-ia{left:1.6em;top:15.8em;display:flex;align-items:flex-start;gap:.9em;padding:.9em 1.2em .9em .9em;max-width:26em}
.o-ia .ic{display:grid;place-items:center;width:3em;height:3em;border-radius:50%;flex:none;background:linear-gradient(135deg,#fff,var(--c));color:var(--ink)}
.o-ia .ic svg{width:1.7em;height:1.7em}
.pc-dev[data-lv="0"] .o-ia .ic{background:none;border:.1em dashed rgba(163,239,244,.6);color:rgba(163,239,244,.7)}
.o-ia p{margin:0;font-size:1.3em;line-height:1.3;color:#f1f3f6}
.o-ia .dots{display:inline-flex;gap:.3em;margin-left:.5em;vertical-align:middle}
.o-ia .dots i{width:.5em;height:.5em;border-radius:50%;background:var(--c)}
.pc-dev[data-lv="3"] .o-ia .dots i,.pc-dev[data-lv="2"] .o-ia .dots i{animation:pcDot 1.2s ease-in-out infinite}
.o-ia .dots i:nth-child(2){animation-delay:.15s!important}.o-ia .dots i:nth-child(3){animation-delay:.3s!important}
@keyframes pcDot{50%{transform:translateY(-.4em);opacity:.4}}

/* ===== configurador ===== */
.pc-cfg{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:stretch;margin-top:30px}
.pc-feat{margin:0;padding:0;border:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.pc-feat legend{grid-column:1/-1;float:left;width:100%;padding:0;margin:0 0 4px}
.pc-feat legend+*{clear:both}
.pc-lg{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pc-lg b{font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em}
.pc-lg span{font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;color:var(--c)}
.pc-chip{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.035);color:#e6e8ec;line-height:1.15;cursor:pointer;overflow:hidden;transition:background .3s,border-color .3s,color .3s,transform .2s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
.pc-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.pc-chip .ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;color:#9aa0ab;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:.3s}
.pc-chip .ico svg{width:19px;height:19px}
.pc-chip .tt{flex:1;min-width:0}
.pc-chip .tt b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.pc-chip .tt small{display:block;margin-top:2px;font-size:12px;color:#8f95a0;transition:color .3s}
.pc-chip .ck{flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:.3s;color:var(--ink)}
.pc-chip .ck svg{width:12px;height:12px;opacity:0;transform:scale(.4);transition:.3s}
.pc-chip:hover{border-color:rgba(163,239,244,.55)}
.pc-chip:active{transform:scale(.98)}
.pc-chip:has(input:checked){background:linear-gradient(135deg,rgba(34,211,238,.2),rgba(163,239,244,.06));border-color:rgba(163,239,244,.75);color:#fff;box-shadow:0 0 24px -10px rgba(34,211,238,.7),inset 0 1px 0 rgba(255,255,255,.12)}
.pc-chip:has(input:checked) .ico{background:linear-gradient(var(--c),var(--c2));color:var(--ink);border-color:transparent}
.pc-chip:has(input:checked) .tt small{color:#c4cbd3}
.pc-chip:has(input:checked) .ck{background:var(--c);border-color:var(--c)}
.pc-chip:has(input:checked) .ck svg{opacity:1;transform:none}
.pc-chip:has(input:focus-visible){outline:2px solid var(--c);outline-offset:2px}

.pc-v1{position:relative;min-width:0;padding:16px 18px 16px;border-radius:18px;background:radial-gradient(120% 90% at 100% 0%,rgba(34,211,238,.22),transparent 60%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(163,239,244,.35);color:#fff;box-shadow:0 24px 40px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.18);display:flex;flex-direction:column;gap:12px}
.pc-v1 p{margin:0}
.pc-v1 .ej{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--c);border-radius:4px;padding:1px 5px;vertical-align:middle;white-space:nowrap}
.pc-v1 .tpc{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pc-v1 .h{font-size:13px;font-weight:600;letter-spacing:.02em;color:#dfe3e8}
.pc-v1 .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--c);font-weight:600}
.pc-v1 .big{display:flex;align-items:center;gap:14px}
.pc-v1 .ring{position:relative;width:64px;height:64px;flex:none}
.pc-v1 .ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.pc-v1 .ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.pc-v1 .ring .bg{stroke:rgba(255,255,255,.12)}
.pc-v1 .ring .fg{stroke:var(--c);stroke-dasharray:157;stroke-dashoffset:157;transition:stroke-dashoffset .8s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 5px rgba(34,211,238,.8))}
.pc-v1 .n{display:flex;flex-direction:column;gap:2px}
.pc-v1 .n b{font-size:54px;line-height:.95;font-weight:700;letter-spacing:-.05em;background:linear-gradient(180deg,#fff,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.pc-v1 .n span{font-size:13px;color:#c4c9d0}
.pc-v1 .vs{display:flex;flex-direction:column;gap:6px}
.pc-v1 .inc{display:flex;flex-wrap:wrap;gap:5px;padding:0;margin:0;list-style:none}
.pc-v1 .inc li{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#eef0f3;background:rgba(163,239,244,.13);border:1px solid rgba(163,239,244,.3);border-radius:999px;padding:3px 9px 3px 6px;animation:pcPop .5s cubic-bezier(.2,1.3,.35,1)}
.pc-v1 .inc li svg{width:13px;height:13px;color:var(--c)}
@keyframes pcPop{from{opacity:0;transform:scale(.7)}}
.pc-v1 .later{opacity:.8}
.pc-v1 .later .k{color:#8f95a0}
.pc-v1 .later em{display:inline-block;font-style:normal;font-size:12px;border:1px dashed rgba(255,255,255,.28);border-radius:999px;padding:2px 8px;margin:0 4px 3px 0;color:#aeb3bc}
.pc-v1 .est{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--c);padding-top:10px;border-top:1px solid rgba(255,255,255,.12);margin-top:auto!important}
.pc-v1 .est::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(163,239,244,.2)}

/* tablet y móvil: sin fijar, el escenario va justo tras el título */
@media(max-width:860px){
 section.how.pc .how-scroll{height:auto}
 section.how.pc .how-sticky{position:relative;height:auto;overflow:visible;padding:calc(var(--rf-r,28px) + 36px) 0 56px;align-items:flex-start}
 section.how.pc .how-grid{display:flex;flex-direction:column;gap:14px}
 section.how.pc .how-copy,section.how.pc .how-stage{display:contents}
 .how.pc .how-copy>.kick{order:1}.how.pc .how-copy>h2{order:2}.how.pc .pc-dev{order:3}.how.pc .how-copy>ol{order:4}.how.pc .pc-cfg{order:5}
 /* la pantalla se diseña a 56 unidades de ancho (un móvil) */
 .pc-dev{aspect-ratio:56/89;max-width:440px;width:100%;margin-bottom:46px}
 .pc-water{top:78%;height:40%}
 .pc-scr{font-size:1.78cqw}
 .pc-tilt{transform:rotateX(3deg) rotateY(calc(-7deg + var(--p,0)*10deg))}
 .pc-bar .ex{display:none}.pc-bar .url{max-width:130px}
 .s-nav,.s-k,.s-p,.s-btns{display:none}
 .s-h{height:6.2em;padding:0 1.8em;gap:1em}
 .s-body{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:1.5em;padding:1.6em 1.8em 1.8em}
 .s-r{order:-1}.s-l{gap:1.2em}
 .s-h1{font-size:3.1em;max-width:16em}
 .s-dest .d:nth-child(3){display:none}.s-dest{grid-template-columns:repeat(2,1fr);min-height:13em}
 .d .pr{font-size:1.3em}
 .pan{grid-template-columns:auto 1fr;gap:1.4em;padding:1em 1.2em}.pan .m:nth-child(2){display:none}.pan .bars{height:3em}
 .o-res{left:1.2em;right:1.2em;bottom:1.2em;padding:1.1em 1.3em}
 .o-res .cal i{height:3.7em}
 .o-pag{top:4.6em;right:1.2em}.o-avi{display:none}
 .o-ia{top:11.4em;left:1.2em;max-width:25em}
 .pc-sd>.in{padding-left:0}
 .pc-sd dl>div{grid-template-columns:1fr;gap:1px}
 .pc-cfg{grid-template-columns:1fr;margin-top:0}
 .pc-feat{grid-template-columns:1fr 1fr}
 .pc-chip{padding:8px}.pc-chip .ico{width:30px;height:30px}.pc-chip .ck{display:none}
 .pc-chip .tt b{font-size:13px}
}
@media(max-width:380px){.pc-feat{grid-template-columns:1fr}.pc-chip .ck{display:grid}}

/* movimiento reducido: todo visible y quieto */
@media(prefers-reduced-motion:reduce){
 section.how.pc .how-scroll{height:auto}
 section.how.pc .how-sticky{position:relative;height:auto;overflow:visible;padding-block:90px}
 .pc-tilt,.pc-tilt *,.pc-sd,.pc-chip,.pc-v1 .ring .fg,.pc-v1 .inc li,.pc-scr *,.pc-sweep{transition:none!important;animation:none!important}
 .pc-tilt{transform:rotateX(3deg) rotateY(-6deg)}
 .pc-sd{grid-template-rows:1fr;visibility:visible}
 .pc-sd>.in{overflow:visible}
}

/* Paso 4: el lanzamiento. Aviso «Ya está en línea», panel de visitas en vivo y la primera reserva entrando. Solo con data-lv=3 */
.pc-go{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;z-index:6}
.pc-dev[data-lv="3"] .pc-go{opacity:1}
.pc-go .go-on{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center;gap:1.2em;padding:.9em 1em;background:rgba(18,120,90,.92);color:#eafff6;font-size:1.5em;font-weight:700;transform:translateY(-100%)}
.pc-dev[data-lv="3"] .go-on{animation:goIn .6s .2s cubic-bezier(.2,.8,.2,1) both}
.pc-go .go-on i{width:.7em;height:.7em;border-radius:50%;background:#7CFFC4;box-shadow:0 0 0 0 rgba(124,255,196,.7);animation:goPulse 1.6s infinite}
.pc-go .go-on span{font-weight:500;opacity:.85}
.pc-go .go-pn{position:absolute;right:3%;top:12%;width:17em;padding:1.1em 1.3em;border-radius:1.1em;background:rgba(9,11,16,.92);border:1px solid rgba(163,239,244,.5);box-shadow:0 1.2em 3em rgba(0,0,0,.5);font-size:1.4em;opacity:0}
.pc-dev[data-lv="3"] .go-pn{animation:goUp .6s .9s ease both}
.pc-go .go-pn p{margin:0;display:flex;align-items:center;gap:.6em;font-size:.85em;color:#a3eff4}
.pc-go .go-pn p i{width:.6em;height:.6em;border-radius:50%;background:#7CFFC4;animation:goPulse 1.6s infinite}
.pc-go .go-pn b{display:block;font-size:2.6em;line-height:1.1;color:#fff}
.pc-go .go-pn small{color:#c4c7ce;font-size:.85em}
.pc-go .go-bk{position:absolute;left:3%;bottom:6%;display:flex;gap:.9em;align-items:center;padding:1em 1.3em;border-radius:1.1em;background:#A3EFF4;color:#0A0B10;box-shadow:0 1.2em 3em rgba(0,0,0,.5);font-size:1.4em;opacity:0}
.pc-dev[data-lv="3"] .go-bk{animation:goUp .6s 1.8s ease both}
.pc-go .go-bk .ic{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;background:#0A0B10;color:#A3EFF4}
.pc-go .go-bk b{display:block;font-size:1em}.pc-go .go-bk small{font-size:.85em;opacity:.8}
@keyframes goIn{to{transform:none}}
@keyframes goUp{from{opacity:0;transform:translateY(1.2em)}to{opacity:1;transform:none}}
@keyframes goPulse{70%{box-shadow:0 0 0 .7em rgba(124,255,196,0)}100%{box-shadow:0 0 0 0 rgba(124,255,196,0)}}
@media(prefers-reduced-motion:reduce){.pc-dev[data-lv="3"] .go-on,.pc-dev[data-lv="3"] .go-pn,.pc-dev[data-lv="3"] .go-bk{animation:none;transform:none;opacity:1}}

/* Carla 13-nov tg 61866: la pantalla de producto se ve entera, con margen bajo la cabecera fija (66 px) */
@media(min-width:861px) and (min-height:761px){
 section.how.pc .how-sticky{box-sizing:border-box;padding-top:96px;padding-bottom:24px}
 .pc-dev{max-width:min(760px,calc((100vh - 470px)*1.08))}
}

/* Carla 13-nov tg 61866: tarjetas de checks con texto que cabe y no pisa el check */
@media(min-width:861px){.pc-cfg{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}}
.pc-chip{gap:8px;padding:8px}
.pc-chip .ico{width:28px;height:28px}.pc-chip .ico svg{width:16px;height:16px}
.pc-chip .tt b{font-size:13px;overflow-wrap:break-word}.pc-chip .tt small{font-size:11.5px;overflow-wrap:break-word}