/*
 * ══════════════════════════════════════════════════════════════════════════════
 * EL BLOQUE DE PLANES
 * ══════════════════════════════════════════════════════════════════════════════
 *
 * Lo usan DOS páginas: `planes.html` y la portada. Está acá y no copiado en cada
 * una porque dos copias del mismo bloque se desincronizan solas — ya nos pasó
 * con los íconos y con la lista de beneficios.
 *
 * Está pensado para fondo OSCURO. Quien lo monte tiene que darle un fondo navy
 * al contenedor; sobre claro queda texto blanco sobre blanco.
 */
/*
 * Mensual / anual.
 *
 * Un solo interruptor para los dos planes, y no uno adentro de cada tarjeta:
 * quien compara Pro con Plus tiene que estar comparando el mismo período. Con
 * un control por tarjeta se puede terminar mirando Pro anual contra Plus
 * mensual y sacando la conclusión al revés.
 */
.pl-switch-wrap { text-align: center; margin: 30px auto 4px; }
.pl-switch-lbl {
  font-family: var(--label); font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 10px;
}
/* La chapita del ahorro, adentro del botón "Un año". */
.pl-chip {
  display: inline-block; margin-left: 7px; padding: 2px 7px; border-radius: 20px;
  background: #00C853; color: #05230F; font-size: 9.5px; font-weight: 800;
  letter-spacing: .3px; vertical-align: 1px;
}
.pl-switch {
  display: inline-flex; justify-content: center; gap: 4px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(41,182,246,.2);
  border-radius: 24px; padding: 4px; width: max-content;
}
.pl-switch button {
  border: none; background: none; cursor: pointer; border-radius: 20px;
  padding: 11px 24px; color: rgba(255,255,255,.6);
  font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; transition: background .18s, color .18s;
  display: inline-flex; align-items: center;
}
.pl-switch button.on { background: var(--g4); color: #fff; }
.pl-ahorro {
  text-align: center; font-size: 12px; color: var(--g6); font-weight: 600;
  min-height: 20px; margin-bottom: 26px;
}

.pl-grid {
  display: grid; gap: 18px; padding: 0 22px 60px;
  max-width: 1080px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: start;
}
.pl-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(41,182,246,.18);
  border-radius: 18px; padding: 26px 24px 24px;
  display: flex; flex-direction: column;
}
/*
 * Plus es el que más se recomienda, y por eso se destaca.
 *
 * OJO CON EL NOMBRE: no se dice "para guías". Ser guía es una condición que
 * regula el Estado, no nosotros, y ponerlo en la tarjeta suena a que hay que
 * serlo para comprarlo —o peor, a que nosotros habilitamos a alguien—. Lo que
 * se vende es la herramienta para organizar una salida grupal, y la puede usar
 * cualquiera que lleve gente: un club, una escuela, un grupo de amigos.
 */
.pl-card.destacada { border-color: rgba(217,99,74,.5); background: rgba(217,99,74,.06); }
.pl-tag {
  display: inline-block; font-family: var(--label); font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; padding: 4px 10px;
  border-radius: 20px; margin-bottom: 12px;
}
.pl-tag.free { background: rgba(107,122,153,.22); color: #A9B7CF; }
.pl-tag.pro  { background: rgba(30,136,229,.20);  color: #6FB7F5; }
.pl-tag.plus { background: rgba(217,99,74,.20);   color: #F0917A; }

.pl-precio { font-family: var(--label); font-size: 32px; line-height: 1; margin-bottom: 4px; }
.pl-precio small { font-size: 14px; font-weight: 600; opacity: .55; }
.pl-periodo { font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 20px; min-height: 18px; }

.pl-grupo {
  font-family: var(--label); font-size: 9px; font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(255,255,255,.4);
  margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08);
}
.pl-grupo:first-of-type { border-top: none; padding-top: 0; margin-top: 4px; }
.pl-item { display: flex; gap: 9px; margin-bottom: 11px; }
.pl-item img { width: 19px; height: 19px; flex-shrink: 0; margin-top: 1px; }
.pl-item-t { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.pl-item-d { font-size: 11.5px; color: rgba(255,255,255,.55); line-height: 1.45; margin-top: 2px; }

.pl-btn {
  margin-top: auto; padding-top: 22px;
}
.pl-btn button, .pl-btn a {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  padding: 13px; border-radius: 11px; cursor: pointer; text-decoration: none;
  font-family: var(--label); font-size: 12.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; border: none;
  transition: filter .15s;
}
.pl-btn button:hover, .pl-btn a:hover { filter: brightness(1.12); }
.pl-btn .comprar-pro  { background: var(--g4);   color: #fff; }
.pl-btn .comprar-plus { background: #D9634A;     color: #fff; }
.pl-btn .neutro {
  background: transparent; color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.18);
}
.pl-btn button:disabled { opacity: .45; cursor: not-allowed; }
/* Aviso de que el cobro por la web todavía no está activo. */
.pl-nota {
  max-width: 1080px; margin: 0 auto 22px; padding: 12px 18px;
  background: rgba(232,160,32,.12); border: 1px solid rgba(232,160,32,.35);
  border-radius: 11px; font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,.78);
}
.pl-nota strong { color: #F5C061; }

/* El pie con lo de Play y la cancelación. */
.pl-pie {
  max-width: 1080px; margin: 0 auto; padding: 0 22px 70px;
  font-size: 12.5px; color: rgba(255,255,255,.5); line-height: 1.65;
}
.pl-pie h3 {
  font-family: var(--label); font-size: 11px; letter-spacing: 1.6px;
  text-transform: uppercase; color: rgba(255,255,255,.7); margin: 26px 0 8px;
}
.pl-pie a { color: var(--g6); }

@media (max-width: 640px) {
  .pl-hero { padding-top: 34px; }
  .pl-hero h1 { font-size: 26px; }
}