/* ASCII only */
/* Pricing simple cards */

#pricing {
  text-align: center; /* títulos y párrafo centrados */
}

/* ===== Toolbar (fuera y arriba del contenedor) ===== */
.pricing-toolbar{
  /* mismo comportamiento de ancho que la card */
  width: 100%;
  max-width: 92vw;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;   /* << centrado real del grupo */
  gap: 10px;                  /* << menos separación entre texto y botones */
  text-align: center;        /* refuerzo */
}
@media (min-width: 768px){
  .pricing-toolbar{ width: 400px; max-width: 400px; }
}
.toolbar-label{
  font-size: 13px;
  color: #4b5563;
  margin-right: 10px;          /* << un pelín más cerca */
}
.toolbar-switch{
  display: inline-flex;
  gap: 10px;                   /* << botones un poco más juntos */
}
.currency-btn{
  appearance: none;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #1f2937;
  border-radius: 8px;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.currency-btn.is-active{
  background: #3969b5;
  border-color: #3969b5;
  color: #fff;
}

/* Contenedor centrado */
.pricing-grid{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== Card base ===== */
.pricing-card{
  /* Móvil: ancho fluido como el contenedor general (flip-cards) */
  width: 100%;
  max-width: 92vw;

  /* Borde azul 2px + sombra envolvente */
  border: 2px solid #3969b5;
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    0 0 0 1px rgba(57,105,181,.05);
  text-align: center;
  padding: 0;
  overflow: hidden;
}

/* Tablet/desktop: ancho fijo 400px */
@media (min-width: 768px){
  .pricing-card{
    width: 400px;
    max-width: 400px;
  }
}

/* ===== Orden responsivo ===== */
/* Desktop/Tablet: DOM = Mensual (izq) + Anual (der) → orden natural */
@media (max-width: 767.98px){
  /* En móvil queremos: Anual primero, Mensual después */
  .pricing-card.card--annual{ order: 0; }
  .pricing-card.card--monthly{ order: 1; }
}

/* ===== Franja superior: título del plan ===== */
.plan-badge{
  background: #e5e7eb;      /* gris claro */
  color: #111827;           /* negro/gris muy oscuro */
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* ===== Bloque de precios ===== */
.price-old{
  margin: 14px 18px 4px;
  font-size: 16px;
  color: #6b7280;           /* gris */
  text-decoration: line-through;
}
.price-old span{
  font-size: 14px;
  vertical-align: super;
}

/* Descuento % (entre viejo y nuevo) */
.discount-badge{
  display: inline-block;
  margin: 0 0 6px 0;        /* espacio propio */
  padding: 4px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #a7f3d0;
}

.price{
  margin: 4px 18px 12px;
  font-size: 30px;
  font-weight: 800;
}
.price span{
  font-size: 18px;
  vertical-align: super;
}
.price small{
  font-size: 14px;
}

/* Mostrar/ocultar precios por moneda */
.pricing-card .price-usd,
.pricing-card .price-old.price-usd { display: none; }
.pricing-card .price-mxn,
.pricing-card .price-old.price-mxn { display: none; }

.pricing-card.currency-USD .price-usd,
.pricing-card.currency-USD .price-old.price-usd { display: block; }

.pricing-card.currency-MXN .price-mxn,
.pricing-card.currency-MXN .price-old.price-mxn { display: block; }

/* Separador degradado (no a todo lo ancho) */
.price-sep{
  height: 1px;
  width: 78%;
  margin: 8px auto 14px;
  background: linear-gradient(
    to right,
    rgba(57,105,181,0),
    rgba(57,105,181,.7),
    rgba(57,105,181,0)
  );
}

/* ===== CTA grande (90% ancho, más padding vertical) ===== */
/* Nota: mantenemos 40px totales hasta el listado:
   btn (mb: 8px) + nota (mb: 32px) = 40px */
.plan-cta{
  display: inline-block;
  width: 90%;
  margin: 2px auto 8px;     /* antes: 40px; ahora 8px, el resto lo da .pay-note */
  padding: 14px 18px;       /* más alto */
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

/* Nota discreta bajo el botón */
.pay-note{
  margin: 0 18px 32px;      /* completa el total de 40px hasta la lista */
  font-size: 12px;
  color: #6b7280;
}

/* ===== Lista con checks en círculo (borde, SIN relleno) ===== */
.plan-list{
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0 18px 0 18px;
  text-align: left;
  display: grid;
  gap: 10px;
}
.plan-list li{
  display: grid;
  grid-template-columns: 16px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 16px;
  line-height: 1.3;
  word-break: break-word;
}
.plan-list li::before{
  content: "✓";
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #3969b5; /* borde del círculo */
  font-size: 10px;
  font-weight: 900;         /* check más “grueso” */
  color: #3969b5;
  background: #ffffff;      /* sin relleno */
  line-height: 1;
  -webkit-text-stroke: 1px #3969b5;
  text-stroke: 1px #3969b5; /* fallback no estándar */
}

/* ===== Logos de pago + prefijo ===== */
.payments{
  margin: 30px 18px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.pay-prefix{
  font-size: 12px;
  color: #6b7280;
}
.payment-logos{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.payment-logos img{
  height: 26px;     /* tamaño homogéneo para Visa/Mastercard/Amex */
  width: auto;
  display: block;
}

/* ===== Footer “Powered by Stripe” ===== */
.powered{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 8px 0 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  margin: 0 14px;
}
.powered span{
  font-size: 13px;
  color: #6b7280;
}
.stripe-logo{
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

/* (Compat) si hubiera más cards, que respiren igual) */
.pricing-card h3{
  margin: 6px 0 10px;
  font-weight: 800;
}

/* ---- Annual badge light blue ---- */
.pricing-card.card--annual .plan-badge{
  background: #dbeafe;         /* light blue */
  color: #0f172a;              /* very dark text */
  border-bottom-color: rgba(30,58,138,.15);
}