/* Aizora — tarjetas de precios de /crm/ (selector mensual/anual). Solo se carga en /crm/. */
.pc-section{position:relative;background:linear-gradient(180deg,var(--bg) 0%,#F3F6FF 100%)}
.pc-section [hidden]{display:none !important}
.pc-toggle-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:30px 0 40px}
.pc-toggle{position:relative;display:inline-flex;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);padding:4px;box-shadow:var(--shadow-sm)}
.pc-toggle button{font-family:var(--H);font-size:14px;font-weight:700;color:var(--ink-2);background:none;border:0;border-radius:var(--r-pill);padding:10px 24px;min-height:42px;cursor:pointer;position:relative;z-index:1;-webkit-tap-highlight-color:transparent;transition:background .18s ease,color .3s var(--ease-out),transform .35s var(--ease-settle)}
.pc-toggle button:active{transform:scale(.96);transition-duration:.08s}
/* indicador deslizante (lo crea pricing.js): la posición y el ancho llegan por --ix/--iw y se animan con transform/width */
.pc-ind{position:absolute;top:4px;bottom:4px;left:0;width:var(--iw,0);transform:translateX(var(--ix,0));border-radius:var(--r-pill);background:var(--brand);box-shadow:0 4px 12px -4px rgba(37,99,255,.55);pointer-events:none;transition:transform .45s var(--ease-settle),width .45s var(--ease-settle)}
.pc-toggle.pc-still .pc-ind{transition:none}
.pc-toggle.has-ind button[aria-checked="true"]{background:transparent;box-shadow:none}
.pc-toggle button:hover{color:var(--ink)}
.pc-toggle button[aria-checked="true"]{background:var(--brand);color:#fff;box-shadow:0 4px 12px -4px rgba(37,99,255,.55)}
.pc-toggle button:focus-visible{outline:3px solid rgba(37,99,255,.45);outline-offset:2px}
.pc-chip{font-family:var(--H);font-size:12.5px;font-weight:700;color:#0F6B49;background:var(--ok-wash);border:1px solid #BFE5D4;border-radius:var(--r-pill);padding:6px 14px}

.pc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1060px;margin:0 auto;align-items:stretch}
.pc{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-2xl);padding:34px 30px 30px;box-shadow:var(--shadow-sm);transition:transform .45s var(--ease-settle),box-shadow .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}}
.pc-name{font-family:var(--H);font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.pc-tag{font-size:14px;line-height:1.5;color:var(--ink-2);margin:6px 0 22px;min-height:42px}
.pc-price{position:relative;display:flex;align-items:baseline;gap:6px;min-height:52px}
.pc-price > span{display:inline-flex;align-items:baseline;gap:6px}
.pc-amt{font-family:var(--H);font-size:48px;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.pc-unit{font-family:var(--B);font-size:16px;font-weight:500;color:var(--ink-2)}
.pc-detail{min-height:84px;margin:12px 0 4px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.pc-detail p{font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.pc-detail p b{color:var(--ink);font-weight:700}
.pc-save{font-family:var(--H);font-size:12px;font-weight:800;color:#0F6B49;background:var(--ok-wash);border-radius:var(--r-xs);padding:4px 10px}
.pc-meta{list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;margin:8px 0 18px;display:flex;flex-direction:column;gap:4px}
.pc-meta li{font-size:14px;color:var(--ink-2)}
.pc-meta li b{font-family:var(--H);color:var(--ink);font-weight:800}
.pc-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.pc-feats li{position:relative;padding-left:28px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.pc-feats li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:6px;background:var(--brand-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232563FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center/12px no-repeat}
.pc .btn{width:100%;justify-content:center;padding-block:14px;font-size:15px}
.pc-fine{text-align:center;font-size:12.5px;color:var(--ink-2);margin-top:12px}

/* plan destacado */
.pc.hl{background:linear-gradient(165deg,#0F1A4A 0%,#070C26 100%);border-color:#24348A;box-shadow:0 28px 60px -22px rgba(37,99,255,.55),0 0 0 1px rgba(77,163,255,.25);transform:translateY(-12px);padding-top:40px}
@media (hover:hover) and (pointer:fine){.pc.hl:hover{transform:translateY(-16px)}}
.pc.hl .pc-name,.pc.hl .pc-amt,.pc.hl .pc-detail p b,.pc.hl .pc-meta li b{color:#fff}
.pc.hl .pc-tag,.pc.hl .pc-detail p,.pc.hl .pc-meta li,.pc.hl .pc-feats li{color:rgba(255,255,255,.82)}
.pc.hl .pc-unit,.pc.hl .pc-fine{color:rgba(255,255,255,.62)}
.pc.hl .pc-meta{border-color:rgba(255,255,255,.16)}
.pc.hl .pc-feats li::before{background-color:rgba(77,163,255,.2);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E")}
.pc.hl .pc-save{color:#9CF0CB;background:rgba(30,157,107,.22)}
.pc-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-family:var(--H);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,var(--brand-ink),var(--brand));border-radius:var(--r-pill);padding:6px 16px;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(37,99,255,.7)}

.pc-note{max-width:760px;margin:34px auto 0;text-align:center;font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.pc-note a{color:var(--brand);font-weight:600}
.pc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:16px}

/* cambio de periodicidad: fundido sutil */
.pc-swap{animation:pc-fade .3s var(--ease-out)}
/* importes: el nuevo entra y el anterior sale en la dirección del cambio (mensual→anual hacia arriba, anual→mensual hacia abajo) */
.pc-price .pc-in{animation:pc-in .42s var(--ease-out) both}
.pc-price .pc-out{position:absolute;left:0;top:0;pointer-events:none;animation:pc-out .2s var(--ease-out) both}
@keyframes pc-in{from{opacity:0;transform:translateY(var(--pc-dy,10px))}to{opacity:1;transform:none}}
@keyframes pc-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(calc(var(--pc-dy,10px) * -1))}}
@keyframes pc-fade{from{opacity:.25;transform:translateY(3px)}to{opacity:1;transform:none}}

@media (max-width:960px){
  .pc-grid{grid-template-columns:1fr;max-width:480px;gap:26px}
  .pc.hl{transform:none;padding-top:40px}
  .pc.hl:hover,.pc:hover{transform:none}
  .pc-tag{min-height:0}
  .pc-detail{min-height:0}
  .pc-price{min-height:0}
}
@media (max-width:420px){
  .pc{padding:30px 22px 26px}
  .pc.hl{padding-top:38px}
  .pc-amt{font-size:42px}
  .pc-toggle button{padding:10px 20px}
}
@media (prefers-reduced-motion:reduce){
  .pc,.pc:hover,.pc.hl:hover,.pc-toggle button{transition:none}
  .pc:hover{transform:none}
  .pc.hl:hover{transform:translateY(-12px)}
  .pc-swap,.pc-price .pc-in,.pc-price .pc-out{animation:none}
  .pc-ind{transition:none}
}