/* =====================================================================
   Planes y recorrido de compra (/suscribirme, /suscribirme/ingresar,
   /datos, /resumen, /estado). Solo disposición y detalles propios:
   colores, tipografías, botones, avisos, campos, sellos y fichas salen de
   ferretero.css. Siempre con los tokens del sistema, así respeta los fondos
   de las preferencias de lectura (papel, claro, oscuro).
   Tamaños de letra propios con la fórmula de preferencias.css:
       font-size: calc(Npx + Npx * var(--fd-extra, 0));
   Responde al ancho real de la página (container "pagina") de 320 a 1440 px.
   ===================================================================== */

/* ---------- Comunes ---------- */

.planes [hidden] { display: none !important; }

.planes-encabezado {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  max-width: 46rem; margin-top: 20px;
}
.planes-encabezado .titulo-1 { overflow-wrap: anywhere; }

.planes-volver {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-left: 2px solid var(--laton); background: var(--papel-claro);
  font-family: var(--fuente-interfaz); font-size: calc(15px + 15px * var(--fd-extra, 0)); line-height: 1.45; font-weight: 600;
  color: var(--tinta);
}
.planes-volver svg { width: 18px; height: 18px; color: var(--clarete); }

.planes-ya-cuenta { color: var(--gris-bajada); }

.planes-avisos { display: flex; flex-direction: column; gap: 16px; max-width: 58rem; margin-top: 28px; }
.planes-avisos:empty { display: none; }
.planes-aviso .aviso-cuerpo { min-width: 0; overflow-wrap: anywhere; }
.planes-aviso:focus { outline: none; }
.planes-aviso:focus-visible { outline: 2px solid var(--clarete); outline-offset: 3px; }
.planes-aviso-acciones { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 2px; }
.planes-aviso-acciones .enlace-mas { min-height: 44px; }

/* ---------- Los dos planes, lado a lado ---------- */

.planes-grilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  max-width: 58rem; margin-top: 32px; align-items: stretch;
}

.planes-plan { display: flex; flex-direction: column; min-width: 0; border-top: 3px solid var(--tinta); }
.planes-plan--anual { border-top-color: var(--clarete); box-shadow: inset 0 0 0 1px var(--regla); }
.planes-plan-cuerpo { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; padding: 28px; min-width: 0; }

.planes-plan-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 30px; }
.planes-plan-cabeza .titulo-3 { overflow-wrap: anywhere; }

.planes-precio { overflow-wrap: anywhere; }
.planes-precio .precio-periodo { white-space: nowrap; }
.planes-plan-cobro {
  font-family: var(--fuente-interfaz); font-size: calc(15px + 15px * var(--fd-extra, 0)); line-height: 1.45; font-weight: 600;
  color: var(--tinta);
}
.planes-plan-ahorro {
  padding: 10px 14px; border-left: 2px solid var(--clarete); background: var(--papel-hundido);
  font-family: var(--fuente-interfaz); font-size: calc(15px + 15px * var(--fd-extra, 0)); line-height: 1.5; color: var(--cuerpo);
}
.planes-plan-ahorro--neutro { border-left-color: var(--borde-control); background: transparent; padding-left: 14px; }

.planes-plan-incluye { padding-top: 14px; border-top: 1px solid var(--regla); }
.planes-plan-incluye li { font-size: calc(15px + 15px * var(--fd-extra, 0)); }
.planes-plan-incluye li > span { min-width: 0; }
.planes-plan-renueva { color: var(--gris-bajada); }

.planes-plan-accion { margin-top: auto; padding-top: 6px; }
.planes-plan-accion form { margin: 0; }
.planes-plan-accion .boton { white-space: normal; }
.planes-plan-nota {
  padding: 12px 14px; border: 1px dashed var(--borde-control); background: var(--papel-hundido);
  font-family: var(--fuente-interfaz); font-size: calc(14.5px + 14.5px * var(--fd-extra, 0)); line-height: 1.45; font-weight: 600;
  color: var(--cuerpo);
}

.planes-letra-chica { max-width: 58rem; margin-top: 20px; color: var(--gris-bajada); }

/* ---------- Qué incluye, cómo funciona, condiciones ---------- */

.planes-incluye-item { gap: 14px; padding-top: 24px; }
.planes-incluye-item .caja-icono { margin-bottom: 2px; }
.planes-como-pasos .paso { gap: 8px; }
.planes-como-pasos .numeral { color: var(--clarete); }
.planes-regla { margin-block: 56px 40px; }
.planes-condiciones > section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.planes-preguntas .encabezado-bloque-textos { align-self: start; }

/* ---------- Recorrido: pasos ---------- */

.planes-pasos {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  max-width: 46rem; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: none;
}
.planes-paso {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding-top: 10px; border-top: 2px solid var(--regla);
  font-family: var(--fuente-interfaz); font-size: calc(14px + 14px * var(--fd-extra, 0)); line-height: 1.3; font-weight: 500;
  color: var(--gris-bajada);
}
.planes-paso-numero {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px;
  width: 30px; height: 30px; border: 1px solid var(--borde-control);
  font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gris-bajada);
}
.planes-paso-numero svg { width: 16px; height: 16px; }
.planes-paso-texto { min-width: 0; overflow-wrap: anywhere; }
.planes-paso--hecho { border-top-color: var(--ok); color: var(--cuerpo); }
.planes-paso--hecho .planes-paso-numero { border-color: var(--ok); color: var(--ok); }
.planes-paso--actual { border-top-color: var(--tinta); color: var(--tinta); font-weight: 700; }
.planes-paso--actual .planes-paso-numero { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }

/* ---------- Recorrido: grilla y cajas ---------- */

.planes-recorrido > .envoltura { padding-bottom: 88px; }

.planes-recorrido-grilla {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: 64px; row-gap: 40px; align-items: start; margin-top: 32px;
}
.planes-recorrido-principal { display: flex; flex-direction: column; gap: 24px; min-width: 0; max-width: 44rem; }
.planes-datos-cuerpo { display: flex; flex-direction: column; gap: 28px; max-width: 48rem; margin-top: 32px; min-width: 0; }

.planes-elegido {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px;
  padding: 18px 20px; background: var(--banda-crema); border-top: 2px solid var(--tinta);
}
.planes-elegido-icono {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
  width: 44px; height: 44px; border: 1px solid var(--regla-crema); color: var(--clarete);
}
.planes-elegido-icono svg { width: 22px; height: 22px; }
.planes-elegido-textos { display: flex; flex-direction: column; gap: 6px; flex: 1 1 14rem; min-width: 0; }
.planes-elegido-nombre {
  font-family: var(--fuente-interfaz); font-size: calc(17px + 17px * var(--fd-extra, 0)); line-height: 1.4; font-weight: 700;
  color: var(--tinta); overflow-wrap: anywhere;
}
.planes-elegido-cambiar,
.planes-cambiar {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--fuente-interfaz); font-size: calc(14.5px + 14.5px * var(--fd-extra, 0)); font-weight: 600;
}

.planes-caja { border-top: 2px solid var(--tinta); }
.planes-caja--pago { border-top-color: var(--clarete); }
.planes-caja-cuerpo { gap: 18px; padding: 28px; }
.planes-caja-letra { padding-top: 14px; border-top: 1px solid var(--regla); }

.planes-lateral { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.planes-bloque { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 2px solid var(--tinta); }

/* ---------- Resumen ---------- */

.planes-datos { margin: 0; border-top: 2px solid var(--tinta); }
.planes-datos-fila {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 6px 20px;
  padding: 12px 0; border-bottom: 1px solid var(--regla);
  font-family: var(--fuente-interfaz); font-size: calc(15px + 15px * var(--fd-extra, 0)); line-height: 1.5;
}
.planes-datos dt { font-weight: 600; color: var(--gris-meta); }
.planes-datos dd { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--tinta); overflow-wrap: anywhere; }
.planes-datos-nombre { font-weight: 700; }
.planes-datos-correo { font-weight: 600; }
.planes-datos-nota { font-size: calc(14px + 14px * var(--fd-extra, 0)); color: var(--gris-bajada); }

.planes-editar { margin-top: -4px; }

.planes-pago { gap: 18px; }
.planes-pago .titulo-3 { margin-bottom: -4px; }
.planes-pago .resumen-errores:focus { outline: 2px solid var(--clarete); outline-offset: 3px; }
.planes-pago .resumen-errores a { overflow-wrap: anywhere; }
.planes-pago .campo { max-width: 32rem; }

.planes-cargo {
  padding-top: 16px; border-top: 2px solid var(--tinta);
  font-family: var(--fuente-editorial); font-size: calc(28px + 20px * var(--fd-extra, 0)); line-height: 1.15; font-weight: 500;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--tinta); overflow-wrap: anywhere;
}
.planes-cargo-detalle { color: var(--gris-bajada); max-width: 40rem; }
.planes-pago .boton { white-space: normal; }

/* Lanzamiento · L03 · Recuadro «Antes de pagar» (justo antes del botón de pago) y sus dos casillas.
   Es un .aviso con el borde de arriba en clarete, como la caja de pago; adentro, la misma ficha del resumen. */
.planes-antes { border-top-color: var(--clarete); }
.planes-antes > .aviso-cuerpo { flex: 1 1 auto; gap: 12px; }
.planes-antes .aviso-titulo { margin: 0; font-size: calc(17px + 17px * var(--fd-extra, 0)); line-height: 1.35; }
.planes-antes-datos { border-top-width: 1px; }
.planes-antes-datos .planes-datos-fila { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); padding: 10px 0; }
.planes-antes-datos .planes-datos-fila:last-child { border-bottom: 0; }
.planes-antes-datos strong { font-weight: 700; color: var(--tinta); }
.planes-antes-casillas { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--regla); }
.planes-antes-casillas > legend { float: left; width: 100%; padding: 0; margin-bottom: 2px; }
.planes-antes-casilla { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.planes-antes-casilla .opcion > span { min-width: 0; overflow-wrap: anywhere; }

.planes-despues { display: flex; flex-direction: column; gap: 14px; margin: 0; padding-left: 22px; }
.planes-despues li {
  padding-left: 4px;
  font-family: var(--fuente-interfaz); font-size: calc(15px + 15px * var(--fd-extra, 0)); line-height: 1.55; color: var(--cuerpo);
}
.planes-despues li::marker { font-weight: 700; color: var(--clarete); }
.planes-despues strong { color: var(--tinta); }

/* ---------- Estado del pago y pago en curso ---------- */

.planes-estado {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  max-width: 46rem; margin-top: 28px;
}
.planes-estado > .sello { align-self: flex-start; }
.planes-estado .titulo-1 { overflow-wrap: anywhere; }
.planes-estado .planes-datos { width: 100%; }
.planes-estado--activo { padding-left: 20px; border-left: 3px solid var(--ok); }
.planes-estado--fallido { padding-left: 20px; border-left: 3px solid var(--clarete); }
.planes-estado--esperando { padding-left: 20px; border-left: 3px dashed var(--borde-control); }
.planes-estado-acciones { margin-top: 4px; }
.planes-estado-acciones form { margin: 0; display: inline-flex; }
.planes-estado-acciones .boton { white-space: normal; }
.planes-estado-nota { color: var(--gris-bajada); max-width: 40rem; }
.planes-estado-vivo:empty { display: none; }
.planes-estado-vivo { font-weight: 600; color: var(--cuerpo); }

.planes-descartar { margin: 0; }

/* Mientras un formulario se envía (planes.js): que se note sin depender del color. */
form[data-enviando="si"] .boton { cursor: progress; }

/* ---------- Responsive ---------- */

@container pagina (max-width: 1180px) {
  .planes-recorrido-grilla { column-gap: 44px; }
}
@container pagina (max-width: 900px) {
  .planes-recorrido-grilla { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .planes-recorrido-principal { max-width: none; }
}
@container pagina (max-width: 760px) {
  .planes-grilla { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
  .planes-plan-cuerpo { padding: 22px 20px; }
  .planes-caja-cuerpo { padding: 22px 20px; }
  .planes-elegido { padding: 16px; }
  .planes-recorrido > .envoltura { padding-bottom: 64px; }
  .planes-regla { margin-block: 40px 28px; }
  .planes-cargo { font-size: calc(24px + 20px * var(--fd-extra, 0)); }
  .planes-estado--activo, .planes-estado--fallido, .planes-estado--esperando { padding-left: 14px; }
}
@container pagina (max-width: 560px) {
  .planes-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .planes-paso { flex-direction: column; align-items: flex-start; gap: 6px; font-size: calc(13px + 13px * var(--fd-extra, 0)); }
  .planes-datos-fila, .planes-antes-datos .planes-datos-fila { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .planes-estado-acciones form, .planes-estado-acciones form .boton { width: 100%; }
}
@container pagina (max-width: 400px) {
  .planes-elegido-icono { display: none; }
  .planes-antes > svg { display: none; }
  .planes-paso-numero { flex-basis: 26px; width: 26px; height: 26px; font-size: 12.5px; }
  .planes-volver { align-items: flex-start; }
}