/* Color con propósito para /precios y /ejemplos (mismos acentos que el home).
   Paleta: coral #ff7a59 · ámbar #f5a800 · verde #25c47c · violeta #8b6bff · rosa #f2559f · turquesa #00c3dc.
   Un color por plan (ESENCIAL verde, PLUS violeta, ULTRA turquesa) y uno por tipo de negocio. Solo CSS: no suma peso de imágenes. */

:root{--mpw-tira:linear-gradient(90deg,#ff7a59,#f5a800,#25c47c,#00c3dc,#8b6bff,#f2559f)}

/* ================= PRECIOS ================= */
.commercial-prices .price-hero{background:radial-gradient(520px 260px at 10% 18%,rgba(255,122,89,.30),transparent 70%),radial-gradient(560px 300px at 90% 28%,rgba(139,107,255,.34),transparent 70%),radial-gradient(420px 220px at 55% 100%,rgba(0,195,220,.20),transparent 70%),#011833}
.commercial-prices .price-hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:4px}
.commercial-prices .period-switch a[aria-current]{background:#ffc233;border-color:#ffc233}
.commercial-prices .pricing-main{background:linear-gradient(180deg,#f2fcff 0,#fff6ec 100%)}

/* tarjetas: ESENCIAL → PLUS → ULTRA, con el orden del HTML en todas las pantallas */
.commercial-prices .pricing-cards{grid-template-columns:1fr 1fr 1.08fr}
.commercial-prices .pricing-card{position:relative;overflow:hidden;padding:3.1rem 1.5rem 1.7rem;border-top:5px solid var(--k,#dce5ed)}
.commercial-prices .pricing-card--esencial{--k:#25c47c;background:#fff}
.commercial-prices .pricing-card--plus{--k:#8b6bff;background:#faf8ff}
.commercial-prices .pricing-card--ultra{--k:#00c3dc;background:#011833;border-color:#00c3dc;border-width:2px;border-top-width:5px}
.commercial-prices .pricing-card .plan-card__name{display:inline-block;align-self:flex-start;margin:0 0 .6rem;padding:.3rem .8rem;border-radius:999px;background:var(--k);color:#fff;font-size:.72rem;font-weight:850;letter-spacing:.08em}
.commercial-prices .pricing-card--esencial .plan-card__name{color:#033a22}
.commercial-prices .pricing-card--ultra .plan-card__name{color:#011833}
.commercial-prices .pricing-card h2{font-size:1.2rem;min-height:3.1em;margin:0 0 .9rem}
.commercial-prices .plan-card__ribbon{position:absolute;left:0;right:0;top:0;border-radius:0;padding:.6rem .5rem;text-align:center;font-size:.72rem;letter-spacing:.07em;background:#00c3dc;color:#011833}

/* precio, periodo y acciones */
.commercial-prices .pricing-card .live-price{margin:0}
.commercial-prices .pricing-card .live-price strong{font-size:2.7rem;line-height:1.05}
.commercial-prices .pricing-card--plus .live-price strong{color:#6d4de0}
.commercial-prices .pricing-card--esencial .live-price strong{color:#139a5f}
.commercial-prices .pricing-card--ultra .live-price strong{color:#00c3dc}
.commercial-prices .pricing-card .period-copy{min-height:4.6em;margin:.35rem 0 1rem;font-size:.82rem;line-height:1.45}
.commercial-prices .pricing-card .pc-cta{margin:0}
.commercial-prices .pricing-card .pc-sec{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.3rem;margin:.65rem 0 .1rem}
.commercial-prices .pricing-card .pc-link{font-size:.85rem;font-weight:700;color:#011833;text-decoration:underline;text-underline-offset:3px}
.commercial-prices .pricing-card .pc-link:hover{color:#00809a}
.commercial-prices .pricing-card--ultra .pc-link{color:#fff}
.commercial-prices .pricing-card--ultra .pc-link:hover{color:#00c3dc}
.commercial-prices .pricing-card .pc-cond{margin:.6rem 0 0;text-align:center;font-size:.76rem;font-weight:700;color:#45606e}
.commercial-prices .pricing-card .pc-cond i{color:#00a6c4}
.commercial-prices .pricing-card--ultra .pc-cond{color:#bcd0e2}
.commercial-prices .pricing-card .pc-sep{border:0;border-top:1px solid #dce5ed;margin:1.25rem 0 1.1rem}
.commercial-prices .pricing-card--ultra .pc-sep{border-top-color:rgba(255,255,255,.2)}
.commercial-prices .pricing-card .check-list{flex:1;margin:0}
.commercial-prices .pricing-card--ultra .check-list strong{color:#fff}
.commercial-prices .pricing-card--plus .check-list li::before{color:#8b6bff}
.commercial-prices .pricing-card--esencial .check-list li::before{color:#25c47c}
.commercial-prices .pricing-card--ultra .check-list li::before{color:#00c3dc}

/* comparación: columnas ESENCIAL → PLUS → ULTRA, encabezado de cada plan en su color */
.commercial-prices .comparison-section{background:#fff6ec}
.commercial-prices .compare-table thead th:nth-child(2){background:#25c47c;color:#033a22}
.commercial-prices .compare-table thead th:nth-child(3){background:#8b6bff;color:#fff}
.commercial-prices .compare-table thead th:nth-child(4){background:#00c3dc;color:#011833}
.commercial-prices .compare-table tbody tr:nth-child(even) td,.commercial-prices .compare-table tbody tr:nth-child(even) th{background:#fffaf4}

/* tira de color como separador de las franjas azules */
.commercial-prices .mpw-xioh-band,.commercial-prices .final-cta{border-top:5px solid transparent;border-image:var(--mpw-tira) 1}
.commercial-prices .faq-section{background:#f6f3ff}

@media(max-width:1000px){
  .commercial-prices .pricing-cards{grid-template-columns:1fr}
  .commercial-prices .pricing-card h2,.commercial-prices .pricing-card .period-copy{min-height:0}
}

/* ================= EJEMPLOS ================= */
.ej-hero{background:radial-gradient(560px 280px at 8% 10%,rgba(255,122,89,.20),transparent 70%),radial-gradient(560px 300px at 92% 18%,rgba(139,107,255,.20),transparent 70%),radial-gradient(520px 260px at 50% 0,rgba(0,195,220,.20),transparent 70%),#fff}
.ej-hero .eyebrow{color:#011833}

/* un color por tipo de negocio (la tarjeta hereda el del primer filtro que cumple) */
.ej-card-item{--k:#00c3dc}
.ej-card-item[data-filtros~="comercios"]{--k:#ff7a59}
.ej-card-item[data-filtros~="restaurantes"]{--k:#f5a800}
.ej-card-item[data-filtros~="salud"]{--k:#25c47c}
.ej-card-item[data-filtros~="servicios"]{--k:#8b6bff}
.ej-card{border-top:5px solid var(--k)}
.ej-card:hover{border-color:var(--k)}
.ej-card__giro{display:inline-block;align-self:flex-start;padding:.34rem .75rem;border-radius:999px;background:var(--k);color:#011833;letter-spacing:.04em;font-size:.7rem}
.ej-card-item[data-filtros~="servicios"] .ej-card__giro{color:#fff}
.ej-card__btn{border-color:var(--k)}
.ej-card__btn:hover{background:#fff6ec}

/* filtros: cada chip con su color al activarse o al pasar el cursor */
.ej-chip[data-filtro="comercios"]{--k:#ff7a59}
.ej-chip[data-filtro="restaurantes"]{--k:#f5a800}
.ej-chip[data-filtro="salud"]{--k:#25c47c}
.ej-chip[data-filtro="servicios"]{--k:#8b6bff}
.ej-chip[data-filtro]:not([data-filtro="todos"]){border-color:var(--k)}
.ej-chip[data-filtro]:not([data-filtro="todos"]):hover{background:var(--k);color:#011833}
.ej-chip[data-filtro]:not([data-filtro="todos"])[aria-pressed="true"]{background:var(--k);border-color:var(--k);color:#011833}
.ej-chip[data-filtro="servicios"]:hover,.ej-chip[data-filtro="servicios"][aria-pressed="true"]{color:#fff}

/* banda y funciones */
.ej-banda{background:linear-gradient(90deg,#eafcff 0,#fff6ec 100%);border-block:0;border-top:5px solid transparent;border-image:var(--mpw-tira) 1}
.ej-funciones{background:#f6f3ff}
.ej-fn{border-top:5px solid var(--k,#00c3dc)}
.ej-fn-grid>li:nth-child(4n+1){--k:#ff7a59}
.ej-fn-grid>li:nth-child(4n+2){--k:#8b6bff}
.ej-fn-grid>li:nth-child(4n+3){--k:#25c47c}
.ej-fn-grid>li:nth-child(4n+4){--k:#f5a800}
.ej-fn h3{position:relative;padding-bottom:.55rem}
.ej-fn h3::after{content:"";position:absolute;left:0;bottom:0;width:38px;height:4px;border-radius:4px;background:var(--k,#00c3dc)}
.ej-cierre{border-top:5px solid transparent;border-image:var(--mpw-tira) 1}