/* Planes de páginas web */
.pw{padding:clamp(90px,14vh,170px) 0;border-top:1px solid var(--rule)}
.pw h2{max-width:17ch;margin-bottom:28px}
.pw-lead{font-size:clamp(18px,1.6vw,23px);color:var(--fg2);max-width:52ch;margin:0}
.pw-planes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(50px,8vh,90px)}
.pw-pl{display:flex;flex-direction:column;padding:clamp(22px,2.6vw,38px);border:1px solid var(--rule);border-radius:10px;transition:border-color .6s var(--out),translate .9s var(--out)}
.pw-pl:hover{translate:0 -5px;border-color:var(--accent)}
.pw-pl.pw-pro{background:var(--bg2);border-color:var(--accent)}
.pw-pl-tag{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;font:400 12px var(--disp);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.pw-pl-tag b{padding:5px 11px;border-radius:20px;background:var(--accent);color:var(--bg);font-weight:400;font-size:10px;letter-spacing:.12em;white-space:nowrap}
.pw-pl h3{font-size:clamp(28px,3vw,44px);line-height:1.12;margin:18px 0 12px}
.pw-pl>p{margin:0 0 26px;color:var(--fg2)}
.pw-pl ul{list-style:none;margin:26px 0 30px;padding:0}
.pw-pl li{position:relative;padding:11px 0 11px 26px;border-top:1px solid var(--rule);font-size:16px;line-height:1.45}
.pw-pl li::before{content:"";position:absolute;left:2px;top:19px;width:11px;height:6px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);rotate:-45deg;translate:0 -2px}
.pw-pl-cta{margin-top:auto;align-self:flex-start;padding:14px 24px;border:1px solid var(--accent);border-radius:30px;font:300 15px var(--disp);transition:background-color .4s,color .4s}
.pw-pl-cta:hover,.pw-pl.pw-pro .pw-pl-cta{background:var(--accent);color:var(--bg)}
.pw-pl.pw-pro .pw-pl-cta:hover{background:none;color:var(--fg)}

/* Vista previa de cada plan */
.pw-pv{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:7px;background:#051815;color:#EDF2F0;border:1px solid rgba(237,242,240,.14)}
.pw-pv-bar{display:flex;gap:5px;padding:9px 11px;border-bottom:1px solid rgba(237,242,240,.12)}
.pw-pv-bar i{width:7px;height:7px;border-radius:50%;background:rgba(237,242,240,.25)}
.pw-pv-in{position:absolute;inset:27px 0 0;padding:7% 7%}
.pw-pv-t{display:block;font:200 clamp(18px,2.3vw,33px)/1.14 var(--disp);overflow:hidden}
.pw-pv-t span{display:block}
.pw-pv-l{display:block;height:5px;width:46%;margin-top:14px;border-radius:3px;background:rgba(237,242,240,.2)}
.pw-pv-l+.pw-pv-l{width:34%;margin-top:8px}
.pw-pv-c{display:block;width:92px;height:27px;margin-top:18px;border-radius:14px;background:#4FE0B4}
.pw-pv.pw-std .pw-pv-in>*{animation:pvFade 7s var(--out) infinite paused}
.pw-pv.pw-std .pw-pv-l{animation-delay:.25s}.pw-pv.pw-std .pw-pv-c{animation-delay:.45s}
.pw-pv-img{position:absolute;inset:27px 0 0 auto;width:48%;overflow:hidden;background:#0a2a26}
.pw-pv-img img{width:100%;height:100%;object-fit:cover;scale:1.28;animation:pvZoom 7s var(--out) infinite paused}
.pw-pv.pw-pro-v .pw-pv-t span{animation:pvLine 7s var(--out) infinite paused}
.pw-pv.pw-pro-v .pw-pv-t+.pw-pv-t span{animation-delay:.14s}
.pw-pv.pw-pro-v .pw-pv-l,.pw-pv.pw-pro-v .pw-pv-c{animation:pvFade 7s var(--out) infinite paused;animation-delay:.5s}
.pw-pv.pw-pro-v .pw-pv-c{animation-delay:.7s}
.pw-pv-img{clip-path:inset(0 0 0 100%);animation:pvWipe 7s var(--out) infinite paused}
.pw-pv-chip{position:absolute;right:6%;bottom:9%;padding:8px 12px;border-radius:7px;background:rgba(7,32,29,.82);backdrop-filter:blur(8px);border:1px solid rgba(79,224,180,.45);font:300 11px var(--disp);animation:pvChip 7s var(--out) infinite paused;white-space:nowrap}
.pw-pv-cur{position:absolute;left:0;top:0;width:13px;height:13px;border-radius:50%;background:rgba(237,242,240,.9);box-shadow:0 0 0 5px rgba(237,242,240,.16);animation:pvCur 7s var(--io) infinite paused}
.play .pw-pv *{animation-play-state:running!important}
@keyframes pvFade{0%{opacity:0;translate:0 12px}12%,90%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes pvLine{0%{translate:0 110%}14%,90%{translate:0 0}100%{translate:0 -110%}}
@keyframes pvWipe{0%,6%{clip-path:inset(0 0 0 100%)}24%,90%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes pvZoom{0%{scale:1.32}100%{scale:1.04}}
@keyframes pvChip{0%,26%{opacity:0;translate:0 14px}38%,90%{opacity:1;translate:0 0}100%{opacity:0}}
@keyframes pvCur{0%,30%{left:20%;top:88%;opacity:0}40%{opacity:1}58%,68%{left:15%;top:72%;scale:1;opacity:1}72%{left:15%;top:72%;scale:.7}78%{scale:1}92%,100%{left:72%;top:55%;opacity:0}}

/* Comparativa */
.pw-sub{margin:clamp(70px,11vh,120px) 0 30px}
.pw-sub h3{font-size:clamp(28px,3.4vw,50px);line-height:1.12}
.pw-tb{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.pw-tb th{padding:0 18px 16px;text-align:left;font:400 12px var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--fg2)}
.pw-tb th:last-child{color:var(--accent)}
.pw-tb td{padding:17px 18px;border-top:1px solid var(--rule);vertical-align:top;color:var(--fg2)}
.pw-tb td:first-child,.pw-tb th:first-child{padding-left:0;width:22%}
.pw-tb td:first-child{font-family:var(--disp);color:var(--fg)}
.pw-tb td:last-child{color:var(--fg)}

/* Lo esencial */
.pw-es{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.pw-ec{display:grid;grid-template-rows:auto 1fr;gap:24px;padding:clamp(22px,2.4vw,34px);border:1px solid var(--rule);border-radius:10px}
.pw-ec h4{margin:0 0 10px;font:200 clamp(22px,2vw,29px)/1.2 var(--disp)}
.pw-ec p{margin:0;color:var(--fg2);font-size:16px}
.pw-es-v{display:flex;flex-direction:column;justify-content:center;gap:9px;min-height:150px;padding:20px;border-radius:7px;background:#051815;color:#EDF2F0;overflow:hidden}
.pw-dom{display:flex;align-items:center;gap:10px;padding:13px 18px;border:1px solid rgba(237,242,240,.2);border-radius:30px;font:300 clamp(14px,1.5vw,19px) var(--disp);min-width:0}
.pw-dom i{flex:none;width:9px;height:11px;border:1.5px solid #4FE0B4;border-radius:2px}
.pw-dom b{font-weight:300;color:#4FE0B4}
.pw-dom u{margin-left:-8px;width:1px;height:1.1em;background:#EDF2F0;animation:parp 1s steps(2) infinite}
@keyframes parp{50%{opacity:0}}
.pw-mail{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:6px;background:rgba(237,242,240,.06);font-size:14px;opacity:0;translate:0 12px;transition:opacity .8s var(--out),translate .9s var(--out);min-width:0;overflow-wrap:anywhere}
.pw-mail i{flex:none;width:7px;height:7px;border-radius:50%;background:#4FE0B4}
.play .pw-mail{opacity:1;translate:0 0}
.pw-mail:nth-child(2){transition-delay:.18s}.pw-mail:nth-child(3){transition-delay:.36s}
.pw-seo{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;font-size:14px}
.pw-seo span{position:relative;padding-left:20px;opacity:0;transition:opacity .8s var(--out)}
.pw-seo span::before{content:"";position:absolute;left:1px;top:7px;width:9px;height:5px;border-left:1.5px solid #4FE0B4;border-bottom:1.5px solid #4FE0B4;rotate:-45deg}
.play .pw-seo span{opacity:1}
.pw-seo span:nth-child(2){transition-delay:.12s}.pw-seo span:nth-child(3){transition-delay:.24s}.pw-seo span:nth-child(4){transition-delay:.36s}.pw-seo span:nth-child(5){transition-delay:.48s}.pw-seo span:nth-child(6){transition-delay:.6s}
.pw-cur{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:12px;font-size:12px;color:#AFC2BE}
.pw-cur s{position:relative;display:block;height:1px;background:rgba(237,242,240,.2);text-decoration:none}
.pw-cur s::after{content:"";position:absolute;top:-6px;left:0;width:13px;height:13px;border-radius:50%;background:rgba(237,242,240,.55);animation:mover 3.4s linear infinite alternate paused}
.pw-cur.pw-fina s::after{background:#4FE0B4;box-shadow:0 0 16px rgba(79,224,180,.6);animation-timing-function:var(--out)}
.play .pw-cur s::after{animation-play-state:running}
@keyframes mover{to{left:calc(100% - 13px)}}

.pw-code{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto;align-items:center;gap:clamp(24px,3.4vw,50px)}
.pw-st{display:flex;flex-wrap:wrap;gap:8px}
.pw-st span{padding:9px 14px;border:1px solid #4FE0B4;border-radius:22px;font:300 14px var(--disp)}
.pw-no{display:flex;gap:16px;margin-top:8px;font-size:14px;color:#AFC2BE}
@media(max-width:820px){.pw-code{grid-template-columns:minmax(0,1fr)}}
/* Ventajas */
.pw-vt{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(18px,2.4vw,36px)}
.pw-vi{padding:22px 0 30px;border-top:1px solid var(--rule)}
.pw-vi b{display:block;font:300 18px/1.3 var(--disp);margin-bottom:8px}
.pw-vi span{color:var(--fg2);font-size:15px;line-height:1.5;display:block}
.pw-fin{margin-top:clamp(60px,9vh,100px);padding-top:clamp(34px,5vh,50px);border-top:1px solid var(--accent);display:flex;justify-content:space-between;align-items:center;gap:36px}
.pw-fin p{margin:0;font:200 clamp(23px,2.6vw,38px)/1.2 var(--disp);max-width:27ch}
.pw-fin small{display:block;margin-top:14px;font:300 15px/1.5 var(--body);color:var(--fg2);max-width:58ch}
.pw-fin .pw-pl-cta{flex:none;margin:0;background:var(--accent);color:var(--bg)}
.pw-fin .pw-pl-cta:hover{background:none;color:var(--fg)}

@media(max-width:1000px){.pw-vt{grid-template-columns:1fr 1fr}.pw-fin{flex-direction:column;align-items:flex-start}}
@media(max-width:820px){
  .pw-planes,.pw-es{grid-template-columns:minmax(0,1fr)}
  .pw-tb thead{display:none}
  .pw-tb,.pw-tb tbody,.pw-tb tr,.pw-tb td{display:block;width:auto!important}
  .pw-tb tr{padding:18px 0;border-top:1px solid var(--rule)}
  .pw-tb td{padding:7px 0 0!important;border:0}
  .pw-tb td:first-child{font-size:18px;padding-top:0!important}
  .pw-tb td[data-p]::before{content:attr(data-p);display:block;font:400 10.5px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:7px 0 2px}
}
@media(max-width:520px){.pw-vt{grid-template-columns:minmax(0,1fr)}.pw-seo{grid-template-columns:minmax(0,1fr)}.pw-pv-chip{display:none}}
@media(prefers-reduced-motion:reduce){
  .pw-pv *,.pw-dom u,.pw-cur s::after{animation:none!important}
  .pw-pv-img{clip-path:none}.pw-mail,.pw-seo span{opacity:1;translate:0 0;transition:none}
}
#menu a{white-space:nowrap}
@media(min-width:901px) and (max-width:1260px){.nav nav{gap:16px;font-size:13px}.nav-cta{padding:10px 14px!important}}
@media(min-width:901px) and (max-width:1120px){.nav nav a[href="#proceso"],.nav nav a[href="#principios"]{display:none}}