/* B99 (14 oct): la sección pública «Planes». La estructura de Comisiona-Planes-Propuesta.html con los tokens y la
   tipografía de la app (ui.css y nucleo.css: Newsreader para títulos, Hanken Grotesk para el resto). Los íconos son
   los mosaicos de ui.css. En escritorio cada fila de tarjetas es una grilla con subgrid: cabeza, título, precio,
   lista y pie quedan en las mismas filas, así los precios van a la misma altura aunque un título ocupe dos líneas.
   En el celular, una columna. */
.pl { background: var(--ui-fondo); padding-bottom: 48px; }
.pl .pl-envoltura { width: min(1120px, calc(100% - 2 * clamp(16px, 3vw, 40px))); }
.pl h1, .pl h2, .pl h3 { font-family: var(--fuente-titulo); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; margin: 0; color: var(--ui-texto); }
.pl a:focus-visible, .pl summary:focus-visible { outline: 2px solid var(--ui-turquesa-luz); outline-offset: 3px; border-radius: 6px; }

/* --- Borrador --- */
.pl-borrador { margin-top: 16px; background: #FFF6DB; color: #5C4A0E; border: 1px solid #EAD48A; border-radius: var(--ui-r1);
  padding: 10px 14px; font-size: 13.5px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pl-borrador strong { letter-spacing: .06em; text-transform: uppercase; font-size: 11.5px; }

/* --- Cabeza de la sección (la web pone cabecera y pie) --- */
.pl-hero { margin-top: 16px; background: var(--ui-aurora); color: var(--ui-texto-osc); border-radius: var(--ui-r3);
  padding: clamp(28px, 4.5vw, 48px) clamp(20px, 5vw, 56px) clamp(64px, 7vw, 88px); }
.pl-eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-turquesa-luz); font-weight: 700; }
.pl .pl-hero h1 { margin-top: 10px; font-size: clamp(30px, 4.6vw, 48px); line-height: 1.1; color: #fff; }
.pl-hero p { margin: 12px 0 0; color: var(--ui-texto-osc-2); font-size: 17px; }

/* --- Tarjetas de plan --- */
.pl-planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; margin-top: -48px; position: relative;
  padding-inline: clamp(0px, 2vw, 24px); }
.pl-plan { background: #fff; border: 1px solid rgba(38,50,56,.12); border-radius: var(--ui-r2); box-shadow: 0 14px 40px rgba(21,20,44,.10);
  padding: 24px; min-width: 0; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 18px; }
.pl-plan.destacado { box-shadow: 0 0 0 1px rgba(63,201,206,.45), 0 18px 48px rgba(0,152,158,.22); border-color: transparent; }
.pl-plan-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pl-plan-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-plan .ui-mosaico { width: 44px; height: 44px; border-radius: 13px; font-size: 22px; }
.pl-plan-nombre { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5F6E75; }
.pl-chip { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #E6F4F5; color: #00676C; white-space: nowrap; }
.pl-chip.dorado { background: transparent; color: #8A6D12; border: 1px solid currentColor; }
.pl .pl-plan h2 { font-size: 23px; line-height: 1.2; }
.pl-precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pl-monto { font-size: 44px; letter-spacing: -.03em; line-height: 1.1; color: var(--ui-texto); }
.pl-moneda { font-size: 22px; font-weight: 700; margin-right: 2px; }
.pl-periodo { color: #5F6E75; font-size: 15px; }
.pl-precio-nota { font-size: 13.5px; color: #5F6E75; margin-top: 6px; }
.pl-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; font-size: 15px; }
.pl-lista li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.pl-lista .ui-ic { font-size: 18px; margin-top: 3px; color: var(--ui-turquesa); stroke-width: 2.4; }
.pl-lista b { font-weight: 700; }
/* 25 oct (acuerdo 3 con las agentes): los paquetes de recarga, bajo el cupo de cada plan. */
.pl-lista-nota { display: block; margin-top: 4px; font-size: 13.5px; color: #5F6E75; }
.pl-pie { display: grid; gap: 12px; align-self: end; }
.pl-renovacion { font-size: 13.5px; color: #5F6E75; border-top: 1px dashed rgba(38,50,56,.12); padding-top: 12px; }

/* Sin subgrid (navegadores viejos): cada tarjeta en columna y el título con alto fijo. */
@supports not (grid-template-rows: subgrid) {
  .pl-plan { display: flex; flex-direction: column; gap: 18px; }
  .pl .pl-plan h2 { min-height: 2.4em; }
  .pl-pie { margin-top: auto; }
}

/* --- Botones --- */
.pl-boton { display: block; min-height: 46px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; border-radius: 12px;
  padding: 13px 18px; text-align: center; text-decoration: none; background: #EEF3F3; color: var(--ui-texto);
  transition: transform .15s ease, filter .15s ease; }
.pl-boton.primario { background: linear-gradient(135deg, var(--ui-turquesa), #007A80); color: #fff; }
@media (hover: hover) { .pl-boton:hover { filter: brightness(1.05); } }
.pl-boton:active { transform: translateY(1px); }

/* --- Prueba gratis --- */
.pl-prueba { margin-top: 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: #fff;
  border: 1px dashed rgba(38,50,56,.12); border-radius: var(--ui-r1); padding: 14px 18px; font-size: 15px; }
.pl-prueba span { color: #5F6E75; }
.pl-prueba .pl-sello { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A6D12;
  border: 1px solid currentColor; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }

/* --- Secciones --- */
.pl-seccion { margin-top: 64px; }
.pl-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #007A80; font-weight: 700; margin-bottom: 8px; }
.pl .pl-seccion-cabeza h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; }
.pl-seccion-cabeza p { color: #5F6E75; margin: 8px 0 0; max-width: 62ch; }

/* --- Comparativa (se desplaza dentro de su caja en el celular, nunca la página) --- */
.pl-comparar { margin-top: 24px; overflow-x: auto; border-radius: var(--ui-r2); border: 1px solid rgba(38,50,56,.12); background: #fff;
  position: relative; /* los textos para lectores de pantalla (.sr, absolutos) quedan dentro de la caja, no ensanchan la página */ }
.pl-comparar table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 680px; font-size: 15px; }
.pl-comparar th, .pl-comparar td { padding: 14px 18px; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(38,50,56,.12); }
.pl-comparar td.c, .pl-comparar th.c { text-align: center; width: 170px; }
.pl-comparar thead th { background: #fff; padding-block: 20px 16px; vertical-align: bottom; }
.pl-col-plan { display: grid; justify-items: center; gap: 8px; }
.pl-col-plan .ui-mosaico { width: 38px; height: 38px; border-radius: 11px; font-size: 19px; }
.pl-col-plan b { font-size: 15px; }
.pl-col-plan > span:last-child { font-size: 13px; color: #5F6E75; font-weight: 600; }
.pl-comparar .pro { background: rgba(0,152,158,.06); }
.pl-comparar thead .pro { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.pl-grupo td { background: #EEF3F3; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #5F6E75; padding-block: 10px; }
.pl-grupo td.pro { background: rgba(0,152,158,.10); }
.pl-si { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: #E6F4F5; color: #00676C; }
.pl-si .ui-ic { font-size: 15px; stroke-width: 2.4; }
.pl-no { color: #5F6E75; }
.pl-valor { font-weight: 700; }
.pl-valor small { display: block; font-weight: 500; font-size: 12.5px; color: #5F6E75; }

/* --- Webs --- */
.pl-aviso-free { margin-top: 20px; display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: #5F6E75; }
.pl-aviso-free .ui-ic { font-size: 18px; color: var(--ui-turquesa); }
.pl-aviso-free b { color: var(--ui-texto); }
.pl-planes.webs { margin-top: 20px; padding-inline: 0; }
.pl-planes.webs .pl-plan { box-shadow: none; }
.pl-planes.webs .pl-plan.destacado { box-shadow: 0 0 0 1px rgba(63,201,206,.45), 0 18px 48px rgba(0,152,158,.22); }
.pl-activo { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto; gap: 24px; align-items: center;
  border: 1px solid rgba(0,152,158,.35); background: linear-gradient(135deg, rgba(0,152,158,.07), rgba(212,175,55,.06));
  border-radius: var(--ui-r2); padding: 22px 26px; }
.pl-activo .pl-kicker { margin-bottom: 4px; }
.pl .pl-activo h3 { font-size: 22px; }
.pl-desde { margin-top: 4px; font-size: 15px; color: #5F6E75; }
.pl-desde b { font-size: 24px; color: var(--ui-texto); }
.pl-activo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.pl-activo li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.pl-activo li .ui-ic { font-size: 18px; margin-top: 3px; color: var(--ui-turquesa); stroke-width: 2.4; }

/* --- Asesor --- */
.pl-asesor { margin-top: 64px; background: var(--ui-aurora); color: var(--ui-texto-osc); border-radius: var(--ui-r3); padding: clamp(24px, 4vw, 40px);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.pl .pl-asesor h2 { font-size: clamp(24px, 3vw, 30px); color: #fff; }
.pl-asesor p { margin: 6px 0 0; color: var(--ui-texto-osc-2); }
.pl-acciones { display: grid; gap: 8px; justify-items: center; }
.pl-boton.wa { background: var(--wa); color: #0B3D21; display: inline-flex; align-items: center; gap: 10px; }
.pl-boton.wa .ui-ic { font-size: 20px; }
.pl-numero { font-size: 13.5px; font-weight: 600; color: var(--ui-texto-osc-2); user-select: all; }

/* --- Preguntas --- */
.pl-preguntas { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.pl-preguntas details { background: #fff; border: 1px solid rgba(38,50,56,.12); border-radius: var(--ui-r1); padding: 16px 18px; min-width: 0; }
.pl-preguntas summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.pl-preguntas summary::-webkit-details-marker { display: none; }
.pl-preguntas summary::after { content: "+"; color: #007A80; font-weight: 700; }
.pl-preguntas details[open] summary::after { content: "–"; }
.pl-preguntas details p { margin: 10px 0 0; color: #5F6E75; font-size: 15px; }

/* --- Responsivo --- */
@media (max-width: 920px) {
  .pl-planes { grid-template-columns: minmax(0, 1fr); row-gap: 20px; max-width: 560px; margin-inline: auto; padding-inline: 0; }
  .pl-plan { display: flex; flex-direction: column; gap: 18px; grid-row: auto; }
  .pl-pie { margin-top: auto; }
  .pl-activo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .pl-preguntas { grid-template-columns: minmax(0, 1fr); }
  .pl-planes { margin-top: -36px; }
  .pl-planes.webs { margin-top: 20px; }
  .pl-acciones, .pl-acciones .pl-boton.wa { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .pl-boton { transition: none; } }

/* B100-PREV (15 oct): con sesión de agente, «Quiero Agente Pro» es un formulario (la solicitud). */
.pl-form { margin: 0; }
.pl-form .pl-boton { width: 100%; }