/* Nodo360 · Página de venta · Planes, clientes y formulario club / municipio
   (el resto del diseño está en index.html) */
[hidden] { display: none !important }
.pricing { padding: 80px 0; background: var(--soft) }
.pricing h2 { font-size: 42px; line-height: 1.03; letter-spacing: -.04em; margin: 8px 0 16px; color: var(--navy) }
.pricing .center > p { color: var(--muted); max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.5 }
.pr-calc { max-width: 560px; margin: 30px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 22px; box-shadow: 0 10px 30px rgba(20, 55, 100, .06) }
.pr-calc label { display: block; font-weight: 800; color: var(--navy); font-size: 14px; margin-bottom: 8px; text-align: center }
.pr-calc-in { display: flex; align-items: center; gap: 16px }
.pr-calc input { flex: 1; accent-color: var(--orange) }
.pr-calc output { min-width: 112px; text-align: right; font-weight: 900; color: var(--orange); font-size: 18px }
.pr-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 22px; margin-top: 28px; align-items: stretch }
.pr-card { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 30px 26px 26px; display: flex; flex-direction: column; box-shadow: 0 12px 34px rgba(20, 55, 100, .07) }
.pr-card.top { border-color: var(--orange); box-shadow: 0 18px 44px rgba(30,158,90, .16) }
.pr-top { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--orange), var(--orange2)); color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; border-radius: 999px; padding: 6px 14px; white-space: nowrap }
.pr-card h3 { font-size: 24px; color: var(--navy); margin: 0 }
.pr-card .pr-d { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 8px 0 16px; min-height: 40px }
.pr-price { display: flex; align-items: baseline; gap: 6px; color: var(--navy) }
.pr-price b { font-size: 36px; letter-spacing: -.03em; line-height: 1 }
.pr-price small { color: var(--muted); font-weight: 700 }
.pr-for { font-size: 13px; color: var(--orange); font-weight: 800; margin-top: 6px }
.pr-rule { font-size: 12.5px; color: var(--muted); margin-top: 6px; line-height: 1.45 }
.pr-ask { font-size: 22px; font-weight: 900; color: var(--navy) }
.pr-ul { list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; flex: 1 }
.pr-ul li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); line-height: 1.35 }
.pr-ul li::before { content: '✓'; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #e8f9f1; color: var(--green); font-size: 11px; font-weight: 900; display: grid; place-items: center; margin-top: 1px }
.pr-ul li.no { color: #a9b6ca } .pr-ul li.no::before { content: '–'; background: #f1f4f9; color: #a9b6ca }
.pr-card .btn { margin-top: 20px; justify-content: center }
.pr-muni { margin-top: 26px }
.pr-mc { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: linear-gradient(120deg, var(--navy), var(--navy2)); color: #fff; border-radius: var(--radius); padding: 26px 30px; box-shadow: var(--shadow) }
.pr-mc .pr-mi { width: 58px; height: 58px; border-radius: 16px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-size: 28px }
.pr-mc small { color: #76e5aa; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; font-size: 11.5px }
.pr-mc h3 { margin: 4px 0 6px; font-size: 22px; color: #fff }
.pr-mc p { margin: 0; color: #c9d6ee; font-size: 14px; line-height: 1.45 }
.pr-mc .btn { margin: 0; white-space: nowrap }
.pr-note { text-align: center; color: var(--muted); font-size: 13px; margin: 22px auto 0; max-width: 640px; line-height: 1.5 }
/* Clientes */
.cl-n { color: var(--muted); font-size: 16px; margin: 6px 0 0 }
.cl-n b { color: var(--orange) }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-top: 30px; text-align: left }
.cl-c { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 8px 22px rgba(20, 55, 100, .05) }
.cl-c .cl-l { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 15px; overflow: hidden }
.cl-c .cl-l img { width: 100%; height: 100%; object-fit: contain; background: #fff }
.cl-c b { display: block; color: var(--navy); font-size: 14.5px; line-height: 1.25 }
.cl-c small { color: var(--muted); font-size: 12.5px }
.cl-more { margin-top: 26px }
/* Formulario: club o municipio */
.d-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: #f1f5fb; border-radius: 14px; padding: 5px }
.d-kind label { margin: 0 !important; cursor: pointer }
.d-kind label { position: relative }
.d-kind input { position: absolute; opacity: 0; pointer-events: none; width: 1px !important; height: 1px; padding: 0 !important; left: 0; top: 0 }
.d-kind span { display: block; text-align: center; padding: 10px 8px; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--muted); transition: .2s }
.d-kind input:checked + span { background: #fff; color: var(--navy); box-shadow: 0 4px 14px rgba(20, 55, 100, .1) }
.d-kind input:focus-visible + span { outline: 2px solid var(--orange) }
.socials:empty { display: none }
@media (max-width: 900px) {
  .pricing { padding: 60px 0 }
  .pricing h2 { font-size: 34px }
  .pr-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; gap: 26px }
  .pr-mc { grid-template-columns: 1fr; text-align: left; padding: 24px }
  .pr-mc .btn { justify-content: center }
}

.demo-wa { background: #ecfdf5; border: 1px solid #b7ebd3; color: #0f5d43; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 12px 0 0 }
.about-img { border-radius: 0; box-shadow: none; background: none; filter: drop-shadow(0 18px 30px rgba(6, 43, 104, .16)) }
/* Acceso clientes en el encabezado */
.login-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 14px; color: var(--navy); padding: 10px 14px; border-radius: 999px; white-space: nowrap }
.login-link:hover { background: #f1f5fb }
.login-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round }
@media (max-width: 1240px) { .login-link { font-size: 0; gap: 0; padding: 9px } .login-link svg { width: 22px; height: 22px } }
@media (max-width: 560px) { .login-link { font-size: 0; gap: 0; padding: 8px } .login-link svg { width: 22px; height: 22px } }
.header-cta { white-space: nowrap }
.nav-actions { display: flex; align-items: center; gap: 6px; flex: none }
@media (max-width: 1100px) { .header-cta { padding: 13px 18px; font-size: 13px } }
@media (max-width: 1100px) and (min-width: 901px) { .navlinks { gap: 13px !important; font-size: 12.5px } .brand-text small { display: none } }
@media (max-width: 1040px) and (min-width: 901px) { .navlinks a[href="#equipo"], .navlinks a[href="#faq"] { display: none } }
@media (max-width: 940px) and (min-width: 901px) { .navlinks a[href="#beneficios"] { display: none } }
.demo-try { margin-top: 18px; font-size: 15px; color: var(--muted) } .demo-try a { color: var(--orange); font-weight: 800 }