/* =====================================================================
   v20 · Precios de lanzamiento 2026, tarjeta Hosting y banda de portafolio
   ===================================================================== */
/* ---------- Planes ---------- */
.plan12 .plan-badge{align-self:flex-start;margin-bottom:14px;padding:5px 10px;border-radius:8px;background:#efe7ff;color:#4a17c9;font:700 11px var(--mono);letter-spacing:.08em}
.plan12.fav .plan-badge{background:var(--lime);color:var(--ink)}
.plan12 .plan-for{min-height:6.4em}
.plan12 .plan-launch{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-top:16px;padding:4px 9px;border-radius:99px;border:1px dashed #b99bf5;color:#6c2bff;font:600 11.5px var(--mono)}
.plan12 .plan-launch:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.plan12.fav .plan-launch{border-color:#ffffff66;color:#fff}
.plan12 .price{margin-top:8px}
.plan12 .plan-once{margin:-4px 0 12px;font:500 12.5px var(--mono);color:var(--muted)}
.plan12.fav .plan-once{color:#e4dcff}
.plan12 .plan-eta{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;margin-bottom:16px;padding:7px 12px;border-radius:10px;background:#f6f2ff;border:1px solid #e3d8f6;font:600 13px Outfit,sans-serif;color:var(--ink)}
.plan12 .plan-eta svg{width:16px;height:16px;fill:none;stroke:#6c2bff;stroke-width:2;stroke-linecap:round}
.plan12.fav .plan-eta{background:#ffffff1f;border-color:#ffffff33;color:#fff}
.plan12.fav .plan-eta svg{stroke:var(--lime)}
.plan12 li b{font-weight:700;color:#6c2bff}
.plan12.fav li b{color:var(--lime)}
.plan12 .button{margin-top:auto}
.plans12{align-items:stretch}
/* Adicionales */
.addons20{max-width:1080px;margin:16px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.addons20-k{grid-column:1/-1;margin:8px 0 0;font:700 12px var(--mono);letter-spacing:.1em;color:#6c2bff}
.addon20{display:grid;gap:4px;padding:16px 18px;border-radius:16px;background:#fff;border:1px dashed #d9cbea;box-shadow:var(--e1)}
.addon20>b{font:700 16px Outfit,sans-serif}
.addon20>span{font-size:14px;color:var(--muted)}
.addon20>em{font:500 13px var(--mono);font-style:normal;color:var(--ink);margin-top:4px}
.addon20>em b{font-weight:700;color:#6c2bff}
@media(max-width:760px){
 .plan12 .plan-for{min-height:0}
 .plan12 .plan-badge{margin-bottom:8px;font-size:10px}
 .plan12 .plan-launch{margin-top:10px;font-size:10.5px}
 .plan12 .plan-once{margin:-2px 0 8px;font-size:11.5px}
 .plan12 .plan-eta{margin-bottom:10px;padding:5px 10px;font-size:12.5px}
 .addons20{grid-template-columns:1fr;margin:10px 0 0;gap:8px}
 .addon20{padding:12px 14px}.addon20>b{font-size:14.5px}.addon20>span{font-size:13px}.addon20>em{font-size:12px}
 #planes .addon{display:none}
}
/* ---------- Servicios: tarjeta Hosting ---------- */
.a-host{display:grid;grid-template-columns:44% 1fr;align-items:center;gap:10px;padding:10px 14px}
.ah-gauge{display:grid;justify-items:center;gap:2px}
.ah-gauge svg{width:100%;max-width:120px;overflow:visible}
.ah-gauge svg path{fill:none;stroke-width:10;stroke-linecap:round}
.ah-track{stroke:#ece6f6}
.ah-fill{stroke:#16a34a;stroke-dasharray:151;stroke-dashoffset:151}
.ah-needle{stroke:#12101f;stroke-width:3;stroke-linecap:round;transform-origin:60px 64px;transform:rotate(-80deg)}
.ah-gauge circle{fill:#12101f}
.ah-gauge b{font:700 11px var(--mono);color:#16a34a}
.ah-status{display:grid;gap:5px;font-size:11px;min-width:0}
.ah-live{display:inline-flex;align-items:center;gap:6px;font:700 12px Outfit,sans-serif;color:#15803d}
.ah-live i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 #22c55e88}
.ah-url{font:600 12px var(--mono);color:var(--ink)}
.ah-net{display:flex;gap:4px}
.ah-net i{flex:1;height:5px;border-radius:9px;background:#e7defa}
.ah-status small{font-size:10.5px;color:#7a7389}
.b-cf{background:#f6821f}
#servicios.anim-on .a-host .ah-fill{animation:ahFill 4.2s cubic-bezier(.3,.7,.2,1) infinite}
#servicios.anim-on .a-host .ah-needle{animation:ahNeedle 4.2s cubic-bezier(.3,.7,.2,1) infinite}
#servicios.anim-on .a-host .ah-live i{animation:ahPulse 1.6s ease-out infinite}
#servicios.anim-on .a-host .ah-net i{animation:ahNet 4.2s ease-in-out infinite}
.a-host .ah-net i:nth-child(2){animation-delay:.12s!important}.a-host .ah-net i:nth-child(3){animation-delay:.24s!important}.a-host .ah-net i:nth-child(4){animation-delay:.36s!important}.a-host .ah-net i:nth-child(5){animation-delay:.48s!important}
@keyframes ahFill{0%,8%{stroke-dashoffset:151}45%,88%{stroke-dashoffset:14}100%{stroke-dashoffset:151}}
@keyframes ahNeedle{0%,8%{transform:rotate(-80deg)}45%,88%{transform:rotate(68deg)}100%{transform:rotate(-80deg)}}
@keyframes ahPulse{0%{box-shadow:0 0 0 0 #22c55e88}100%{box-shadow:0 0 0 8px #22c55e00}}
@keyframes ahNet{0%,20%{background:#e7defa}40%,85%{background:#86efac}100%{background:#e7defa}}
@media(prefers-reduced-motion:reduce){.a-host .ah-fill{stroke-dashoffset:14}.a-host .ah-needle{transform:rotate(68deg)}.a-host .ah-net i{background:#86efac}}
/* ---------- Trabajos: banda de lanzamiento ---------- */
.launch20{border:1.5px solid #c6ff3d66;background:linear-gradient(120deg,#c6ff3d14,#6c2bff1f)}
.launch20 p{color:#e4dcff}.launch20 p b{color:#fff}
@media(max-width:760px){
 .work13 .next18.launch20{display:flex!important;margin-top:14px;padding:14px 16px;gap:10px}
 .launch20 .next-badge{font-size:10.5px}
 .launch20 p{font-size:13.5px;line-height:1.45;margin:0}
 .launch20 .button{min-height:40px;padding:9px 16px;font-size:13.5px}
}