/* ==========================================================================
   Keymon Digital · Tarjetas de precios (componente compartido)
   Réplica del diseño aprobado en /servicios/mantenimiento-web/ (#planes).
   Uso: añadir clases km-pc* al marcado existente; no requiere cambiar textos.
   - .km-pc-grid (+ --2 / --3 / --4)  contenedor
   - .km-pc (+ --featured)            tarjeta
   - .km-pc__wrap                     envoltorios internos (se "aplanan")
   - .km-pc__badge  __label  __name  __desc  __price  __meta  __cta  __list  __extra  __note
   Se carga la última en <head>; especificidad doblada (.km-pc.km-pc) para
   imponerse a los estilos inline de cada página sin usar !important.
   ========================================================================== */
.km-pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;margin-top:44px;padding-top:6px}
.km-pc-grid.km-pc-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin-inline:auto}
.km-pc-grid.km-pc-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.km-pc-grid.km-pc-grid--1{grid-template-columns:minmax(0,1fr);margin-top:0}

.km-pc.km-pc{position:relative;display:flex;overflow:visible;flex-direction:column;min-width:0;height:auto;margin:0;padding:32px 28px 29px;border:1px solid rgba(11,27,43,.10);border-radius:20px;background:linear-gradient(180deg,#fff 0%,#FBFCFE 100%);box-shadow:0 22px 55px rgba(11,27,43,.14);color:#0B1B2B;font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;transform:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.km-pc.km-pc::before{content:"";position:absolute;inset:0 0 auto;left:0;right:0;top:0;bottom:auto;width:auto;max-width:none;height:5px;opacity:1;transform:none;border-radius:20px 20px 0 0;background:linear-gradient(90deg,#1F3A8A,#5270CF);pointer-events:none}
.km-pc.km-pc::after{content:none}
.km-pc.km-pc:nth-child(3n+2)::before{background:linear-gradient(90deg,#6E42C1,#A47DDE)}
.km-pc.km-pc:nth-child(3n)::before{background:linear-gradient(90deg,#0F7A78,#3DB5B0)}
.km-pc.km-pc:hover{transform:translateY(-5px);box-shadow:0 30px 70px rgba(11,27,43,.20)}
.km-pc.km-pc--featured{border:2px solid #F5A623;box-shadow:0 28px 70px rgba(11,27,43,.18),0 0 0 1px rgba(245,166,35,.08)}
.km-pc.km-pc--featured::before{background:linear-gradient(90deg,#F5A623,#FFD06D)}

/* Envoltorios internos: sus hijos pasan a ordenarse dentro de la tarjeta */
.km-pc.km-pc .km-pc__wrap{display:contents}

/* Orden visual idéntico a mantenimiento */
.km-pc.km-pc .km-pc__label{order:1}
.km-pc.km-pc .km-pc__name{order:2}
.km-pc.km-pc .km-pc__desc{order:3}
.km-pc.km-pc .km-pc__price{order:4}
.km-pc.km-pc .km-pc__meta{order:5}
.km-pc.km-pc .km-pc__cta{order:6}
.km-pc.km-pc .km-pc__list{order:7}
.km-pc.km-pc .km-pc__extra{order:8}
.km-pc.km-pc .km-pc__note{order:9}
.km-pc.km-pc .km-pc__hide{display:none}

.km-pc.km-pc .km-pc__badge{position:absolute;top:-16px;right:24px;z-index:2;width:auto;margin:0;padding:7px 12px;border:0;border-radius:999px;background:#F5A623;color:#0B1B2B;box-shadow:0 8px 24px rgba(0,0,0,.18);font-family:inherit;font-size:.66rem;font-weight:900;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;transform:none}
.km-pc.km-pc .km-pc__label{display:inline-flex;align-self:flex-start;width:max-content;max-width:100%;min-height:28px;align-items:center;margin:0;padding:5px 9px;border:0;border-radius:7px;background:#EEF3FF;color:#1F3A8A;font-family:inherit;font-size:.66rem;font-weight:900;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}
.km-pc.km-pc:nth-child(3n+2) .km-pc__label{background:#F0EAFE;color:#6842C2}
.km-pc.km-pc:nth-child(3n) .km-pc__label{background:#E7F8F8;color:#0F6B69}
.km-pc.km-pc--featured .km-pc__label{background:#FFF0D6;color:#8A4D00}
.km-pc.km-pc .km-pc__name{display:block;min-height:72px;margin:13px 0 0;padding:0;color:#0B1B2B;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:clamp(1.42rem,1.8vw,1.68rem);font-weight:850;line-height:1.08;letter-spacing:-.025em}
.km-pc.km-pc .km-pc__desc{min-height:88px;margin:11px 0 19px;padding:0;color:#5B6978;font-size:.85rem;line-height:1.62}
.km-pc.km-pc .km-pc__price{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 8px;margin:0 0 5px;padding:2px 0 0;color:#0B1B2B;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:3.2rem;font-weight:900;line-height:.95;letter-spacing:-.055em}
.km-pc.km-pc .km-pc__price strong,.km-pc.km-pc .km-pc__price b{color:inherit;font:inherit;letter-spacing:inherit}
.km-pc.km-pc .km-pc__price span,.km-pc.km-pc .km-pc__price small{padding-bottom:5px;color:#6B7885;font-family:"Manrope",system-ui,sans-serif;font-size:.76rem;font-weight:750;line-height:1.3;letter-spacing:0}
.km-pc.km-pc .km-pc__price .km-pc__from{order:-1;width:100%;padding:0 0 2px;color:#6B7885;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.km-pc.km-pc .km-pc__price .km-maint-price{padding:0;color:inherit;font:inherit;letter-spacing:inherit}
.km-pc.km-pc .km-pc__meta{display:block;min-height:44px;margin:10px 0 20px;padding:10px 12px;border:0;border-radius:10px;background:#F2F5F8;color:#4D5D6C;font-family:inherit;font-size:.72rem;font-weight:750;line-height:1.45;letter-spacing:0;text-transform:none}
.km-pc.km-pc .km-pc__cta{position:relative;display:inline-flex;width:100%;min-height:52px;align-items:center;justify-content:center;gap:5px;margin:0 0 22px;padding:12px 18px;border:0;border-radius:8px;background:#0B1B2B;color:#fff;box-shadow:0 12px 28px -16px rgba(11,27,43,.75);font-family:inherit;font-size:.86rem;font-weight:850;line-height:1.2;text-align:center;text-decoration:none!important;transform:none;transition:background .18s ease,box-shadow .18s ease}
.km-pc.km-pc .km-pc__cta::after{content:"→";margin-left:5px;font-size:1.05rem;transition:transform .18s ease}
.km-pc.km-pc .km-pc__cta::before{content:none}
/* color con !important: algunas páginas fijan el color de su botón con !important */
.km-pc.km-pc .km-pc__cta{color:#fff!important}
.km-pc.km-pc .km-pc__cta:hover{background:#17336F;color:#fff!important;box-shadow:0 16px 34px -16px rgba(11,27,43,.8)}
.km-pc.km-pc .km-pc__cta:hover::after{transform:translateX(3px)}
.km-pc.km-pc .km-pc__cta:focus-visible{outline:3px solid #F5A623;outline-offset:3px}
.km-pc.km-pc--featured .km-pc__cta{background:#F5A623;color:#0B1B2B!important;box-shadow:0 14px 32px -16px rgba(245,166,35,.8)}
.km-pc.km-pc--featured .km-pc__cta:hover{background:#E49112;color:#0B1B2B!important}
.km-pc.km-pc .km-pc__list{display:grid;gap:0;margin:0;padding:0;list-style:none;color:#435363;font-size:.82rem}
.km-pc.km-pc .km-pc__list li{position:relative;display:block;margin:0;padding:10px 0 10px 31px;border:0;border-top:1px solid #E7EBEF;background:none;color:inherit;font-size:inherit;line-height:1.48}
.km-pc.km-pc .km-pc__list li:first-child{border-top:0}
.km-pc.km-pc .km-pc__list li::before{content:"✓";display:grid;position:absolute;left:0;top:10px;width:20px;height:20px;margin:0;place-items:center;border:0;border-radius:50%;background:#E8F5EF;color:#18794E;font-size:.69rem;font-weight:950;line-height:1;transform:none}
.km-pc.km-pc .km-pc__list li::after{content:none}
.km-pc.km-pc .km-pc__list li strong{color:#0B1B2B}
.km-pc.km-pc .km-pc__extra{margin:14px 0 0;color:#5B6978;font-size:.8rem;line-height:1.55}
.km-pc.km-pc .km-pc__note{margin:12px 0 0;color:#6B7885;font-size:.74rem;line-height:1.5}
.km-pc.km-pc .km-pc__subtitle{order:7;display:block;margin:0 0 6px;color:#6B7885;font-size:.68rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.km-pc.km-pc .km-pc__subtitle + .km-pc__list,.km-pc.km-pc .km-pc__list{order:7}

/* Tablet: 4 → 2 columnas; tarjetas sin alturas mínimas de alineación */
@media(max-width:1199px){
  .km-pc-grid.km-pc-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .km-pc-grid:not(.km-pc-grid--1):not(.km-pc-grid--2):not(.km-pc-grid--3){grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1020px){
  .km-pc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .km-pc-grid.km-pc-grid--3{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
  .km-pc.km-pc .km-pc__name,.km-pc.km-pc .km-pc__desc,.km-pc.km-pc .km-pc__meta{min-height:0}
}
@media(max-width:720px){
  /* especificidad alta a propósito: debe ganar a la regla de tablet con :not() */
  .km-pc-grid.km-pc-grid.km-pc-grid.km-pc-grid.km-pc-grid{grid-template-columns:minmax(0,1fr);gap:26px;max-width:none}
  .km-pc.km-pc{padding:29px 22px 24px}
  .km-pc.km-pc .km-pc__name{font-size:1.5rem}
  .km-pc.km-pc .km-pc__price{font-size:3rem}
  .km-pc.km-pc .km-pc__badge{top:-14px;right:17px}
  .km-pc.km-pc .km-pc__cta{font-size:.84rem}
}
@media(max-width:480px){.km-pc.km-pc .km-pc__price{font-size:2.25rem}}
@media(prefers-reduced-motion:reduce){.km-pc.km-pc,.km-pc.km-pc .km-pc__cta,.km-pc.km-pc .km-pc__cta::after{transition:none}.km-pc.km-pc:hover{transform:none}}