/* Paleta violeta (--ma-violet-*) en css/brand-tokens.css (global). */
/* Hero de precios: foto oscura + overlay violeta (mock mock-precios-minhaagenda.html),
   adaptado a la paleta de marca (no el #7367f0 viejo). El mensaje de venta vive acá;
   la grilla de planes queda sin encabezado. */
.precios-hero {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* Bajo a propósito: es una página de precios, los planes tienen que verse sin
     hacer scroll. */
  padding: 40px 24px 44px;
  text-align: center;
  overflow: hidden;
}
.precios-hero-bg {
  position: absolute; inset: 0;
  background-image: url("../../img/front-pages/backgrounds/precios-hero.345fc60ae66d.jpg");
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.32) saturate(0.85);
}
.precios-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,8,32,0.55) 0%, rgba(14,8,32,0.45) 40%, rgba(13,8,32,0.96) 100%);
}
.precios-hero-content { position: relative; z-index: 2; max-width: 760px; }
/* El hero va centrado, así que el breadcrumb también. */
.precios-hero-content .ma-breadcrumb { justify-content: center; }
.precios-hero .ph-title {
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 900; line-height: 1.08; letter-spacing: -1px;
  color: #fff; margin-bottom: 12px;
}
.precios-hero .ph-sub { font-size: 1.1rem; color: rgba(255,255,255,0.74); line-height: 1.6; margin-bottom: 12px; }
.precios-hero .ph-pill {
  display: inline-flex; align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50px; padding: 8px 22px;
  font-size: 0.82rem; color: rgba(255,255,255,0.82);
}
@media (max-width: 575.98px) {
  .precios-hero { padding: 32px 18px 34px; }
}

/* Sección de planes (mock docs/planes-de-precios-minhaagenda.html), paleta violeta
   del proyecto (#6C3FC5 / #6D28D9). Todo scopeado bajo #landingPricing para no
   filtrar al resto del landing. */
#landingPricing.landing-pricing-v2 { background: linear-gradient(160deg,#f5f3ff 0%,#ede9fe 30%,#f8f7fa 60%,#f0f4ff 100%); padding: 40px 0 72px; position: relative; overflow: hidden; }
#landingPricing.landing-pricing-v2::before { content:''; position:absolute; top:-120px; right:-80px; width:400px; height:400px; background: radial-gradient(circle, rgba(108,63,197,0.12) 0%, transparent 70%); border-radius:50%; pointer-events:none; }
#landingPricing.landing-pricing-v2::after { content:''; position:absolute; bottom:-80px; left:-60px; width:350px; height:350px; background: radial-gradient(circle, rgba(109,40,217,0.08) 0%, transparent 70%); border-radius:50%; pointer-events:none; }
/* Las columnas las manda la CANTIDAD de planes pagos (`auto-fit`). Con 210px de
   mínimo, tres caben desde tablet dentro del `.container` de Bootstrap (720px). */
#landingPricing .pricing-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:20px; align-items:stretch; max-width:1080px; margin:0 auto; padding:0; position:relative; z-index:1; }
#landingPricing .pricing-card { border-radius:20px; border:1.5px solid rgba(108,63,197,0.12); box-shadow:0 4px 24px rgba(61,26,110,0.07); transition: transform .3s ease, box-shadow .3s ease; background:#fff; display:flex; flex-direction:column; }
#landingPricing .pricing-card:hover { transform: translateY(-6px); box-shadow:0 16px 48px rgba(61,26,110,0.14); }
#landingPricing .pc-header { padding:18px 20px 14px; border-bottom:1px solid rgba(108,63,197,0.08); text-align:center; }
#landingPricing .pc-tope { margin:10px 0 0; font-size:0.95rem; font-weight:700; color:#2d2b3d; }
#landingPricing .pc-correos { margin:2px 0 0; font-size:0.8rem; color:#6b6b7b; }
#landingPricing .pc-base { margin:0 0 8px; font-size:0.8rem; font-weight:700; color:#6C3FC5; }
#landingPricing .pc-name { font-size:1.05rem; font-weight:700; color:#2d2b3d; margin-bottom:4px; }
#landingPricing .price-amount { font-size:1.85rem; font-weight:900; background:linear-gradient(135deg,#6C3FC5 0%,#6D28D9 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; display:inline-block; }
#landingPricing .price-period { color:#9b98ab; font-size:0.78rem; font-weight:500; margin-left:2px; }
#landingPricing .pc-body { padding:16px 20px; flex:1; display:flex; flex-direction:column; }
#landingPricing .pc-desc { font-size:0.82rem; font-style:italic; margin-bottom:12px; color:#9b98ab; text-align:center; }
#landingPricing .pc-features { list-style:none; padding:0; margin:0 0 auto; }
#landingPricing .pc-features li { display:flex; align-items:flex-start; gap:8px; padding:3px 0; font-size:0.875rem; line-height:1.35; color:#3d3b4a; font-weight:500; }
#landingPricing .pc-features li i { color:#6C3FC5; font-size:0.95rem; flex-shrink:0; line-height:1.35; }
#landingPricing .pc-cta { margin-top:16px; }
#landingPricing .btn-pp-primary { display:block; width:100%; text-align:center; background:linear-gradient(135deg,#6C3FC5 0%,#6D28D9 100%); border:none; border-radius:12px; padding:11px; font-weight:700; font-size:0.92rem; box-shadow:0 6px 20px rgba(108,63,197,0.4); transition:all .3s; color:#fff; text-decoration:none; }
#landingPricing .btn-pp-primary:hover { box-shadow:0 10px 28px rgba(108,63,197,0.55); transform:translateY(-1px); color:#fff; }
#landingPricing .pricing-card.featured { border:2px solid #6C3FC5; box-shadow:0 8px 40px rgba(108,63,197,0.22); position:relative; }
#landingPricing .pricing-card.featured::before { content:'⭐ MÁS POPULAR'; position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,#6C3FC5 0%,#6D28D9 100%); color:#fff; font-size:0.7rem; font-weight:800; letter-spacing:0.1em; padding:5px 16px; border-radius:50px; white-space:nowrap; z-index:10; box-shadow:0 4px 12px rgba(108,63,197,0.4); }
#landingPricing .pricing-card.featured .pc-header { background:linear-gradient(160deg, rgba(108,63,197,0.06) 0%, rgba(109,40,217,0.04) 100%); border-radius:18px 18px 0 0; }
#landingPricing .pricing-card.premium { background:linear-gradient(160deg,#1e1b4b 0%,#312e81 100%); border:none; box-shadow:0 8px 32px rgba(30,27,75,0.35); }
#landingPricing .pricing-card.premium .pc-header { border-bottom-color:rgba(255,255,255,0.1); }
#landingPricing .pricing-card.premium .pc-name { color:#f0eeff; }
#landingPricing .pricing-card.premium .price-amount { background:linear-gradient(135deg,#a78bfa 0%,#c4b5fd 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
#landingPricing .pricing-card.premium .price-period { color:rgba(196,181,253,0.8); }
#landingPricing .pricing-card.premium .pc-desc { color:rgba(196,181,253,0.75); }
#landingPricing .pricing-card.premium .pc-features li { color:#e9e5ff; }
#landingPricing .pricing-card.premium .pc-features li i { color:#a78bfa; }
#landingPricing .pricing-card.premium .pc-tope { color:#f0eeff; }
#landingPricing .pricing-card.premium .pc-correos { color:rgba(196,181,253,0.8); }
#landingPricing .pricing-card.premium .pc-base { color:#c4b5fd; }
#landingPricing .pricing-card.premium .pc-contratar { color:#c4b5fd; }
#landingPricing .btn-pp-premium { display:block; width:100%; text-align:center; background:rgba(167,139,250,0.15); color:#c4b5fd; border:1.5px solid rgba(167,139,250,0.4); border-radius:12px; padding:11px; font-weight:700; font-size:0.92rem; transition:all .3s; text-decoration:none; }
#landingPricing .btn-pp-premium:hover { background:rgba(167,139,250,0.3); border-color:rgba(167,139,250,0.7); color:#c4b5fd; }
#landingPricing .pc-contratar { display:block; margin-top:8px; text-align:center; font-size:0.82rem; color:#6C3FC5; text-decoration:underline; text-underline-offset:2px; }

/* Franja de la prueba gratis: va arriba de los planes porque aplica a todos. */
#landingPricing .pp-prueba { display:flex; align-items:center; gap:14px; max-width:880px; margin:0 auto 36px; padding:14px 18px; background:#fff; border:1.5px solid rgba(108,63,197,0.18); border-radius:16px; position:relative; z-index:1; }
#landingPricing .pp-prueba > i { font-size:1.6rem; color:var(--ma-violet-700); flex-shrink:0; }
#landingPricing .pp-prueba p { margin:0; flex:1; font-size:0.92rem; color:#3d3b4a; }
#landingPricing .pp-prueba-cta { flex-shrink:0; background:linear-gradient(135deg,#6C3FC5 0%,#6D28D9 100%); color:#fff; border-radius:10px; padding:9px 18px; font-weight:700; font-size:0.88rem; text-decoration:none; white-space:nowrap; }
#landingPricing .pp-prueba-cta:hover { color:#fff; box-shadow:0 6px 20px rgba(108,63,197,0.4); }

/* Comparación completa, plegada: el detalle para quien lo busca. */
#landingPricing .pp-comparar { max-width:880px; margin:40px auto 0; background:#fff; border:1.5px solid rgba(108,63,197,0.12); border-radius:16px; position:relative; z-index:1; }
#landingPricing .pp-comparar > summary,
#landingPricing .pp-faq-item > summary { cursor:pointer; font-weight:700; color:#2d2b3d; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
#landingPricing .pp-comparar > summary::-webkit-details-marker,
#landingPricing .pp-faq-item > summary::-webkit-details-marker { display:none; }
#landingPricing .pp-comparar > summary::after,
#landingPricing .pp-faq-item > summary::after { content:'+'; font-size:1.3rem; font-weight:400; color:#6C3FC5; flex-shrink:0; }
#landingPricing .pp-comparar[open] > summary::after,
#landingPricing .pp-faq-item[open] > summary::after { content:'−'; }
#landingPricing .pp-comparar > summary { padding:16px 20px; }
#landingPricing .pp-tabla-wrap { overflow-x:auto; padding:0 12px 14px; }
#landingPricing .pp-tabla { width:100%; border-collapse:collapse; font-size:0.86rem; }
#landingPricing .pp-tabla th, #landingPricing .pp-tabla td { padding:9px 8px; border-top:1px solid rgba(108,63,197,0.1); }
#landingPricing .pp-tabla thead th { border-top:none; font-weight:700; color:#2d2b3d; text-align:center; }
#landingPricing .pp-tabla tbody th { font-weight:500; color:#3d3b4a; text-align:left; }
#landingPricing .pp-tabla td { text-align:center; color:#3d3b4a; font-weight:600; white-space:nowrap; }
#landingPricing .pp-tabla td .ti-check { color:#6C3FC5; font-size:1.1rem; }
#landingPricing .pp-tabla .pp-no { color:#c4c2cf; }

#landingPricing .pp-faq { max-width:880px; margin:48px auto 0; position:relative; z-index:1; }
#landingPricing .pp-faq h2 { font-size:1.4rem; font-weight:800; color:#2d2b3d; margin-bottom:14px; text-align:center; }
#landingPricing .pp-faq-item { background:#fff; border:1.5px solid rgba(108,63,197,0.12); border-radius:14px; margin-bottom:10px; }
#landingPricing .pp-faq-item > summary { padding:14px 18px; font-size:0.95rem; }
#landingPricing .pp-faq-item p { margin:0; padding:0 18px 16px; font-size:0.9rem; color:#4b4958; line-height:1.55; }

/* Teléfono: las tarjetas una bajo otra (antes iban en un slider y había que
   deslizar para comparar). */
@media (max-width:575.98px){
  #landingPricing .pricing-grid { gap:22px; }
  #landingPricing .pp-prueba { flex-wrap:wrap; margin-bottom:30px; }
  #landingPricing .pp-prueba-cta { width:100%; text-align:center; }
  #landingPricing .pp-tabla { font-size:0.8rem; }
  #landingPricing .pp-tabla th, #landingPricing .pp-tabla td { padding:8px 5px; }
}