/* Planes de BuscadorLaboral (/planes/), 27-sep-2026. Se apoya en conectar.css (banda, carril, botones, tabla, pie) y
   agrega solo lo propio: el selector anual/mensual, la tarjeta del plan y las preguntas. Tokens del kit granate;
   pesos 400-700, radios 6/12/18/999, filetes de 1 px, sin itálicas. */

.pl-hero { padding: 52px 0 60px; }
.pl-hero h1 { max-width: 24ch; }
.pl-aviso { margin: 0; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--oc-r-pill); background: rgba(255, 255, 255, .08); font-size: 14.5px; line-height: 1.5; color: var(--oc-on-navy-soft); }
.pl-aviso b { color: #fff; font-weight: 600; }

.pl-sec-plan { padding-top: 56px; }

/* Selector anual / mensual */
.pl-modo { display: flex; width: fit-content; margin: 0 auto 22px; padding: 4px; gap: 4px; border: 1px solid var(--oc-line-2); border-radius: var(--oc-r-pill); background: var(--oc-surface); }
.pl-modo-op { position: relative; }
.pl-modo-op input { position: absolute; opacity: 0; pointer-events: none; }
.pl-modo-op span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--oc-r-pill); font-size: 15px; font-weight: 600; color: var(--oc-body-soft); cursor: pointer; transition: background var(--oc-dur) var(--oc-ease), color var(--oc-dur) var(--oc-ease); }
.pl-modo-op:hover span { color: var(--oc-ink); }
.pl-modo-op input:checked + span { background: var(--oc-bg-marca, var(--oc-navy)); color: #fff; }
.pl-modo-op input:focus-visible + span { box-shadow: var(--oc-focus-ring); }
.pl-ahorro-chip { padding: 1px 8px; border-radius: var(--oc-r-pill); background: var(--oc-navy-100); color: var(--oc-navy-900); font-size: 12px; font-style: normal; font-weight: 700; }
.pl-modo-op input:checked + span .pl-ahorro-chip { background: rgba(255, 255, 255, .18); color: #fff; }

/* La tarjeta del plan: precio a la izquierda, lo que incluye a la derecha */
.pl-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); max-width: 1000px; margin: 0 auto; border: 1px solid var(--oc-navy-300); border-radius: var(--oc-r-lg); background: var(--oc-surface); box-shadow: 0 18px 40px -26px rgba(76, 12, 24, .45); overflow: hidden; }
.pl-plan-precio { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 32px 28px; border-right: 1px solid var(--oc-line); }
.pl-plan-nombre { margin: 0 0 14px; font-size: 18px; font-weight: 600; color: var(--oc-navy-900); }
.pl-monto { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pl-cifra { font-family: var(--oc-font-sans); font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--oc-ink); font-variant-numeric: tabular-nums; }
.pl-periodo { font-size: 16px; font-weight: 500; color: var(--oc-mute); }
.pl-equiv { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--oc-ink); }
.pl-letra { margin: 0 0 22px; font-size: 14.5px; line-height: 1.55; color: var(--oc-body-soft); }
.pl-cta { width: 100%; }
.pl-cta-nota { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--oc-line-2); border-radius: var(--oc-r-sm); background: var(--oc-bg-alt); font-size: 14px; line-height: 1.5; color: var(--oc-body); }
.pl-medios { margin: auto 0 0; padding-top: 18px; font-size: 13px; line-height: 1.55; color: var(--oc-mute); }
.cx main .pl-medios b { color: var(--oc-body); font-weight: 600; }

.pl-plan-incluye { padding: 30px 32px 28px; background: var(--oc-bg-alt); }
.pl-plan-incluye h3 { margin: 0 0 14px; font-size: 18px; font-weight: 600; color: var(--oc-navy-900); }
.pl-lista { margin: 0 0 18px; padding: 0; list-style: none; }
.pl-lista li { position: relative; padding: 8px 0 8px 26px; border-bottom: 1px solid var(--oc-line); font-size: 15px; line-height: 1.5; color: var(--oc-body); }
.pl-lista li:last-child { border-bottom: 0; }
.pl-lista li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2px solid var(--oc-navy); border-bottom: 2px solid var(--oc-navy); transform: rotate(-45deg); }
.pl-sin { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--oc-mute); }

/* Preguntas */
.pl-faq { max-width: 760px; }
.pl-faq h2 { margin: 0 0 20px; font-size: clamp(27px, 2.4vw, 34px); font-weight: 600; line-height: 1.18; letter-spacing: -.02em; text-align: center; color: var(--oc-navy-900); }
.pl-faq details { border-bottom: 1px solid var(--oc-line); }
.pl-faq details:first-of-type { border-top: 1px solid var(--oc-line); }
.pl-faq summary { padding: 16px 28px 16px 0; font-size: 16px; font-weight: 600; color: var(--oc-ink); cursor: pointer; list-style: none; position: relative; }
.pl-faq summary::-webkit-details-marker { display: none; }
.pl-faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 20px; font-weight: 500; color: var(--oc-navy); }
.pl-faq details[open] summary::after { content: "−"; }
.pl-faq details p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.65; color: var(--oc-body); }
.pl-legal { margin: 20px 0 0; font-size: 14px; text-align: center; color: var(--oc-mute); }

@media (max-width: 760px) {
  .pl-plan { grid-template-columns: minmax(0, 1fr); }
  .pl-plan-precio { border-right: 0; border-bottom: 1px solid var(--oc-line); padding: 24px 20px; }
  .pl-plan-incluye { padding: 24px 20px; }
  .pl-cifra { font-size: 40px; }
  .cn-carril { width: min(calc(100% - 32px), 1264px); }
  .pl-modo-op span { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .pl-modo-op span { transition: none; } }