/* @vertical PET — descuento de Cyber Week en precios.html y probar.html. Campaña temporal: ver cabecera de
 * cyber-week-precios.js. La etiqueta sale de cyber-week-2-etiqueta.webp, la misma del banner de la home. */
.cwp-viejo{color:var(--ink-soft);font-weight:500;text-decoration-thickness:1.5px;white-space:nowrap}
.cwp-pill{flex:none;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;
  color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* la línea "+$X en complementos" con lo mismo sin descuento (plan-pet.css hace de .sumados un bloque con hidden) */
.sumados:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.cwp-detalle:not([hidden]){display:inline-flex;align-items:center;gap:8px}

.plan .cwp-total-lista{font-size:1.45rem;letter-spacing:-.02em}
.plan-op .cwp-total-lista{font-size:14.5px}

/* formulario de probar.html: los complementos en filas, como en precios.html, para que entre todo */
.plan-extras .chips{flex-direction:column;flex-wrap:nowrap}
.plan-extras .chip{display:flex;box-sizing:border-box;width:100%;min-height:38px;align-items:center;justify-content:flex-end;
  gap:4px 8px;text-align:left}
.plan-extras .chip > span:first-child{flex:1;min-width:0}
.plan-extras .chip-cant{flex-wrap:wrap}
.plan-op .cwp-antes{display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px}
.plan-op .cwp-viejo{font-size:13px}
.plan-op .cwp-antes + .po-precio{font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--accent)}
.cwp-meses{font-size:12.2px;font-weight:600;color:var(--accent)}
.cwp-meses-extras{margin:-2px 0 8px}
#planElegir .cwp-nota{justify-content:flex-start;max-width:none;margin-top:14px;font-size:13px}
#planElegir .cwp-nota svg{width:20px;height:20px}

.plan.cwp-oferta{background:linear-gradient(180deg,var(--accent-mist) 0,transparent 230px),var(--paper)}
/* ::before: el ::after de .plan es el borde del hover (precios.html) */
.plan.cwp-oferta::before{content:"";position:absolute;top:14px;right:16px;width:118px;aspect-ratio:491/362;pointer-events:none;
  background:url(/cyber-week-2-etiqueta.webp) center/contain no-repeat}
.cwp-antes{display:flex;align-items:center;gap:10px;margin:14px 0 0}
.cwp-antes .cwp-viejo{font-size:1.25rem}
.cwp-antes + .price{margin-top:4px;color:var(--accent)}

/* sección "Sumale módulos": mismo renglón de oferta en cada tarjeta y la etiqueta arriba a la derecha */
.mod .cwp-antes{gap:8px;margin:8px 0 0;font-size:inherit}
.mod .cwp-antes .cwp-viejo{font-size:1rem}
.cwp-mes{margin-left:-4px;font-size:13px;color:var(--ink-soft)}
.mod .cwp-antes + .mod-precio{margin-top:2px;color:var(--accent)}
.modulos .wrap{position:relative}
.modulos .wrap::after{content:"";position:absolute;top:-68px;right:max(32px,calc(50% - 470px));width:130px;aspect-ratio:491/362;
  pointer-events:none;background:url(/cyber-week-2-etiqueta.webp) center/contain no-repeat}

.cwp-nota{display:flex;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;width:100%;max-width:640px;
  margin:26px auto 0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.cwp-nota svg{width:24px;height:24px;flex:none;color:var(--accent)}
.cwp-nota b{font-weight:600;color:var(--ink)}
.cwp-nota b:first-child{color:var(--accent)}

/* Celular: la fila no alcanza para todo; el precio tachado ya dice que hay descuento. */
@media (max-width:520px){
  .sumar .chip .cwp-pill,.plan-extras .chip .cwp-pill{display:none}
  .plan.cwp-oferta::before{width:92px;top:18px}
  .modulos .wrap::after{top:-76px;right:20px;width:96px}
}