/* ---- Precios: tarjetas de planes (rediseño 14-oct-2026) ----
   Reproduce el diseño aprobado: banda clara con círculos suaves, eyebrow,
   titular en dos tonos, chips de beneficio y tres tarjetas —la de en medio
   levantada, con listón «Más popular»—.

   Todo el estilo vive aquí y no en clases de Tailwind a propósito: este CSS se
   sirve tal cual, mientras que tailwind.css viene compilado de antes y solo
   trae las clases que existían cuando se compiló. Lo que se escriba aquí
   funciona hoy y en el próximo despliegue.

   Las clases van con prefijo cb- para no chocar con nada del resto del sitio. */

.cb-precios {
  --cb-ink: #0E1F36;
  --cb-mut: #5C7794;
  --cb-line: #E3EEFA;
  --cb-blue: #2796F2;
  --cb-blue-deep: #1877E8;
  --cb-soft: #EAF4FF;

  position: relative;
  overflow: hidden;
  margin-inline: -1.5rem;              /* mismo sangrado que el resto de bandas */
  padding: 4.5rem 1.5rem 4rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F9FF 42%, #F8FCFF 100%);
  border-top: 1px solid #E7F1FB;
  border-bottom: 1px solid #E7F1FB;
  color: var(--cb-ink);
}

@media (min-width: 768px) {
  .cb-precios { margin-inline: -3rem; padding: 5.5rem 3rem 5rem; }
}

/* ---- Decoración de fondo (círculos y puntos) ---- */
.cb-precios__deco {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cb-precios__deco--a {
  width: 460px; height: 460px;
  left: -170px; top: -180px;
  background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, rgba(255, 255, 255, 0) 68%), #EAF4FF;
  opacity: .9;
}
.cb-precios__deco--b {
  width: 560px; height: 560px;
  right: -220px; top: -140px;
  background: #EDF6FF;
  opacity: .75;
}
.cb-precios__dots {
  position: absolute;
  right: 7%; top: 62px;
  width: 130px; height: 96px;
  background-image: radial-gradient(#C6DBF1 1.5px, transparent 1.5px);
  background-size: 15px 15px;
  opacity: .75;
  pointer-events: none;
}
/* Las dos marcas azules que acompañan a los chips, a la derecha. */
.cb-precios__spark {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  background: var(--cb-blue);
  opacity: .85;
}
.cb-precios__spark--a { right: 6.5%; top: 300px; width: 18px; height: 4px; transform: rotate(38deg); }
.cb-precios__spark--b { right: 5.2%; top: 318px; width: 12px; height: 4px; transform: rotate(38deg); }

@media (max-width: 900px) {
  .cb-precios__dots, .cb-precios__spark { display: none; }
}

/* ---- Envoltura y encabezado ---- */
.cb-wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

.cb-head { display: flex; flex-direction: column; align-items: center; text-align: center; }

.cb-eyebrow {
  display: inline-block;
  background: #E7F3FF;
  color: #2E86DA;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 999px;
}

.cb-title {
  margin: 22px 0 0;
  max-width: 660px;
  font-size: 32px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--cb-ink);
}
.cb-title span { color: var(--cb-blue); }
@media (min-width: 768px) { .cb-title { font-size: 46px; } }

.cb-sub {
  margin: 18px 0 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cb-mut);
}

.cb-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.cb-chips li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--cb-soft);
  border-radius: 999px;
  padding: 7px 16px 7px 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cb-ink);
}
.cb-chip-ic {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--cb-blue);
  color: #FFFFFF;
  flex: none;
}
.cb-chip-ic--wa { background: #25D366; }
.cb-chips li svg { width: 15px; height: 15px; }

/* ---- Rejilla de planes ---- */
/* Sin `align-items:start`: las tres tarjetas se estiran a la misma altura y el
   `margin-top:auto` del botón los deja a los tres a la misma línea, que es como
   se ve en el diseño. La de en medio se sale 16px por arriba con margen
   negativo, no con transform, para no pelearse con la animación de entrada. */
.cb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 52px;
}
@media (min-width: 768px) {
  .cb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cb-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--cb-line);
  border-radius: 20px;
  padding: 26px 24px 24px;
  box-shadow: 0 18px 40px -32px rgba(13, 77, 128, .55);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
.cb-plan:hover {
  transform: translateY(-6px);
  border-color: #CFE6FB;
  box-shadow: 0 34px 64px -34px rgba(13, 77, 128, .5);
}

/* La tarjeta de en medio va levantada: es la que queremos que se mire. */
.cb-plan--top {
  border: 2px solid var(--cb-blue);
  box-shadow: 0 30px 60px -30px rgba(39, 150, 242, .55);
  margin-top: -16px;
}
.cb-plan--top:hover {
  border-color: var(--cb-blue);
  box-shadow: 0 40px 74px -30px rgba(39, 150, 242, .6);
}
@media (max-width: 767px) {
  /* En una columna, «levantada» solo encimaria el listón con la tarjeta de
     arriba: el aire se lo da el margen normal. */
  .cb-plan--top { margin-top: 26px; }
}

.cb-ribbon {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #3AA6FB, var(--cb-blue-deep));
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 14px 26px -14px rgba(24, 119, 232, .8);
}
.cb-ribbon svg { width: 14px; height: 14px; }

/* ---- Cabeza de la tarjeta ---- */
.cb-plan__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.cb-plan__name {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--cb-ink);
}
.cb-plan--basico .cb-plan__name { color: #2E6BB0; }
.cb-plan__desc {
  margin: 9px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cb-mut);
}
.cb-plan__ic {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--cb-soft);
  color: var(--cb-blue);
  flex: none;
}
.cb-plan__ic--on { background: #DCEBFF; color: var(--cb-blue-deep); }
.cb-plan__ic svg { width: 22px; height: 22px; }

/* ---- Precio ---- */
.cb-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 24px 0 0;
  color: var(--cb-ink);
}
.cb-price__m {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.cb-price__c {
  font-size: 15px;
  font-weight: 700;
  color: #7E97B0;
}
.cb-price__nota {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--cb-mut);
}
/* El Empresarial no lleva importe ni «por mes»: se cotiza. El relleno de abajo
   ocupa el sitio de esa línea para que la frase que sigue quede a la misma
   altura que en las otras dos tarjetas. */
.cb-price--medida { padding-bottom: 24px; }
.cb-price--medida .cb-price__m { font-size: 34px; }

.cb-plan__lead {
  margin: 20px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cb-ink);
}

/* ---- Lista de lo que incluye ---- */
.cb-feats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 26px;
  padding: 0;
  list-style: none;
}
.cb-feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: #31465E;
}
.cb-tick {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: var(--cb-blue);
  color: #FFFFFF;
  flex: none;
  margin-top: 1px;
}
.cb-tick svg { width: 11px; height: 11px; stroke-width: 3.4; }

/* ---- Botón ---- */
.cb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 13px 20px;
  border-radius: 999px;
  border: 1px solid #D8E7F7;
  background: #FFFFFF;
  color: var(--cb-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, filter .2s ease;
}
.cb-btn:hover {
  border-color: #B9D8F5;
  box-shadow: 0 14px 26px -18px rgba(13, 77, 128, .6);
}
.cb-btn svg { width: 16px; height: 16px; flex: none; }

.cb-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #3AA6FB, var(--cb-blue-deep));
  color: #FFFFFF;
  box-shadow: 0 18px 32px -16px rgba(24, 119, 232, .8);
}
.cb-btn--primary:hover { filter: brightness(1.05); box-shadow: 0 22px 38px -16px rgba(24, 119, 232, .85); }

/* ---- Pie de la sección ---- */
.cb-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 36px 0 0;
  font-size: 14.5px;
  font-weight: 500;
  color: #41576F;
  text-align: center;
}
.cb-foot svg { width: 17px; height: 17px; color: var(--cb-blue); flex: none; }

@media (prefers-reduced-motion: reduce) {
  .cb-plan { transition: none; }
  .cb-plan:hover { transform: none; }
}