/*
 * «EL CLIENTE ELIGE SU CUOTA» — ESTILOS DEL PASO «ELIGE TU PLAN» Y DE «TU ELECCIÓN»
 * ============================================================================
 * POR QUÉ ASÍ (4-oct-2026)
 * Miguel pidió «todo UX/UI y que la experiencia sea fantástica», y que lo que el
 * cliente no puede elegir lleve «sus colores correspondientes».
 *
 * ⚠️ DOS FAMILIAS DE COLOR, A PROPÓSITO:
 *   · La MARCA (elegido, botón, acentos) sale de var(--rk-marca): es el token del
 *     tema del app (menú «Diseño app») y cambia por temporada como todo el app.
 *     Si no está, cae al naranja del manual de marca (#E74922).
 *   · Las LÍNEAS, los NIVELES y el PLUS son colores FIJOS: son los de las tarjetas
 *     de nivel (app/public/images/lineas-de-compra) y de status-plus.php. Con el
 *     token, una temporada verde haría parecer Express a la Clásica.
 *       Clásica #FA4515 · Express #9ED52A · Clásica Prime negro · Plus --pc-plus
 *     El amarillo es SOLO del Plus: el Nivel 6 (antes ámbar) va con el color de su línea.
 *   · ⚠️ EL STATUS PLUS SIEMPRE ES AMARILLO CON LETRAS BLANCAS (regla de marca de
 *     Miguel, 4-oct-2026): la etiqueta «Te falta Plus», el tramo «+ Plus», la
 *     pastilla de la hoja y cada «Status Plus» resaltado.
 *     EL AMARILLO ES EL DE LA PANTALLA «¿CÓMO OBTENER EL PLUS?» DEL PROPIO APP
 *     (app/puntos/pasos/status-plus.php): #F5A623. Por unas horas del 4-oct fue
 *     un dorado más oscuro (#BF8A00), para que el blanco contrastara más; Miguel
 *     lo vio en su teléfono al lado de esa pantalla y lo descartó: «el color del
 *     Plus es el de la pantalla de Status Plus, que ya hay una pantalla de la
 *     propia app que lo tiene». El Plus tiene UN amarillo en todo el app.
 *     ⚠️ LA LEGIBILIDAD SE CUIDA CON EL PESO Y EL TAMAÑO DE LA LETRA, NUNCA
 *     OSCURECIENDO EL COLOR: blanco en peso 800 (más grueso que el 700 de esa
 *     pantalla, porque aquí la letra es más chica), sin sombras ni bordes que
 *     ensucien el amarillo.
 *     ⚠️ UNA SOLA VARIABLE: --pc-plus, definida abajo para .pc y para la hoja
 *     (que vive fuera de .pc), y que toma el color de --rk-plus, la variable del
 *     Plus de TODO el app (generals.css). Todo sale de .pc-m-plus, .pc-p-plus,
 *     .pc-e-plus, .pc-plus-marca y .pc-plus-ico: si aparece otro «Plus», usa una
 *     de esas y nunca escribas el color a mano.
 *   · Lo que traba la COMPRA (monto mínimo, banda de la cuota) va en gris: no es
 *     un castigo ni una meta del cliente.
 *
 * ⚠️ Sin color-mix(): el WebView de Android viejo no lo tiene. El tinte de la
 * marca se arma con un degradado blanco translúcido ENCIMA del color.
 * Todo vive bajo .pc-* para no tocar nada del resto del app.
 */

/*
 * El peso 800 de Montserrat, SOLO para el blanco sobre el amarillo del Plus. El app carga
 * de 400 a 700 (config/head.php): sin esta línea, un `font-weight: 800` se pinta en 700.
 * Si no llega (sin señal), queda el 700 de siempre; el renglón del motivo se vuelve a
 * medir cuando la tipografía termina de cargar (ajustarMotivos, en elegir-plan.php).
 * ⚠️ Un @import va ANTES de cualquier regla: no le pongas nada encima.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap');

/* El amarillo del Status Plus (el de status-plus.php): una sola variable para la pantalla y para la hoja.
   Sale de --rk-plus, la del Plus de todo el app (generals.css); el hex queda de respaldo. */
.pc, .pc-hoja {
  --pc-plus: var(--rk-plus, #F5A623);
}

.pc {
  --pc-marca: var(--rk-marca, #E74922);
  --pc-tinta: #2A2421;
  --pc-gris: #7A6F68;
  --pc-gris-claro: #A79C94;
  --pc-borde: #E9E2DB;
  --pc-fondo: #FAF7F4;
  --pc-bloq: #F5F1ED;
  color: var(--pc-tinta);
  -webkit-tap-highlight-color: transparent;
}

.pc *, .pc-hoja * { box-sizing: border-box; }
/* ⚠️ Las reglas de abajo dan display a varios bloques (.pc-esq, .pc-aviso, .pc-fija) y esta hoja
   carga DESPUÉS de Tailwind: sin esto, su .hidden perdía y el esqueleto quedaba a la vista. */
.pc .hidden, .pc.hidden { display: none !important; }

/* ── Esqueleto mientras llega la compra ─────────────────────────────────── */
.pc-esq { display: grid; gap: 14px; margin-top: 6px; }
.pc-esq div {
  border-radius: 18px;
  background: linear-gradient(90deg, #F3EEE9 0%, #FBF8F5 45%, #F3EEE9 90%);
  background-size: 220% 100%;
  animation: pc-brillo 1.2s ease-in-out infinite;
}
@keyframes pc-brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ── La compra ──────────────────────────────────────────────────────────── */
.pc-compra {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--pc-borde); border-radius: 20px;
  padding: 14px 14px 14px 12px;
  box-shadow: 0 8px 22px -18px rgba(42, 36, 33, .45);
}
.pc-compra-ico {
  flex: 0 0 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)), var(--pc-marca);
  color: var(--pc-marca);
}
.pc-compra-txt { flex: 1; min-width: 0; }
.pc-compra-en { font-size: 12px; color: var(--pc-gris); line-height: 1.25; }
.pc-compra-aliado { font-size: 14px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.pc-compra-total { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin-top: 2px; }
.pc-compra-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.pc-linea {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 4px 9px 4px 7px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  background: #F4F1EE; color: var(--pc-tinta);
}
.pc-linea i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* El nivel del cliente («Tu nivel: 2»), debajo de la línea. El color lo pone el nivel de su
 * línea (elegir-plan.php, colorNivel): el mismo de las etiquetas «Desde Nivel 2». */
.pc-nivel {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  border-radius: 999px; padding: 4px 9px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}

/*
 * ── La marca del cliente en la tarjeta de la compra: «Prime» · «Prime | Plus» · «Plus» ──
 * Miguel (5-oct-2026), con una captura de su compra: «cuando es Prime tiene que ser
 * Prime | Plus, porque ese cliente es Plus y solo dice Prime». La tarjeta pintaba «Prime» y
 * se olvidaba del Status Plus, aunque el servidor lo entrega en la misma respuesta
 * (cliente.plus = clientes.r_plus, el dato vigente). Y a quien tiene Plus sin Prime —más de un
 * tercio de las compras en tienda— no le decía nada.
 * Dos tramos pegados, como en la pantalla «¿Cómo obtener el Plus?»: «Prime» en negro y
 * cursiva, «Plus» en el amarillo del Plus con letras blancas. La barra «|» no se escribe: es
 * la unión del negro con el amarillo. Un solo tramo cuando el cliente tiene una sola cosa.
 * Sin gap, sin inset y sin color-mix (WebView viejo).
 */
.pc-estado {
  display: inline-flex; align-items: stretch; flex: 0 0 auto;
  border-radius: 999px; overflow: hidden; white-space: nowrap;
  font-size: 11px; font-weight: 700;
}
.pc-estado > span { display: inline-flex; align-items: center; padding: 4px 8px; }
.pc-estado > .pc-e-prime { background: #111; color: #fff; font-style: italic; }
.pc-estado > .pc-e-plus { background: var(--pc-plus); color: #fff; font-weight: 800; }
/* Dos tramos: cada uno cede 2 px hacia la unión para que se lea como una sola pieza. */
.pc-estado > .pc-e-prime:not(:last-child) { padding-right: 6px; }
.pc-estado > .pc-e-prime + .pc-e-plus { padding-left: 6px; }

/* ── Aviso (el comercio cambió el monto, etc.) ─────────────────────────── */
.pc-aviso {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 12px; padding: 11px 12px; border-radius: 14px;
  background: #FFF6E5; border: 1px solid #F8DDA8; color: #6B4A00;
  font-size: 13px; line-height: 1.35; font-weight: 500;
}
.pc-aviso svg { flex: 0 0 18px; margin-top: 1px; }

/* ── Cada pregunta ──────────────────────────────────────────────────────── */
.pc-grupo { margin-top: 20px; border-radius: 18px; transition: box-shadow .2s, background .2s; }
.pc-grupo-cab { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.pc-num {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--pc-tinta); color: #fff; font-size: 12px; font-weight: 700;
  transition: background .2s;
}
.pc-num svg { display: none; }
.pc-grupo.is-ok .pc-num { background: var(--pc-marca); }
.pc-grupo.is-ok .pc-num span { display: none; }
.pc-grupo.is-ok .pc-num svg { display: block; }
.pc-grupo-cab h3 { font-size: 15px; font-weight: 700; line-height: 1.3; margin: 1px 0 0; }
.pc-grupo-cab p { font-size: 12px; color: var(--pc-gris); line-height: 1.35; margin: 2px 0 0; }

/* Le falta: se marca la pregunta y tiembla una vez */
.pc-grupo.pc-falta { box-shadow: 0 0 0 2px var(--pc-marca); background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)), var(--pc-marca); padding: 10px; margin-left: -10px; margin-right: -10px; animation: pc-temblor .38s ease; }
@keyframes pc-temblor { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Una sola frecuencia: no es pregunta, es un dato */
.pc-fija {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 10px 12px; border-radius: 14px;
  background: var(--pc-fondo); border: 1px solid var(--pc-borde);
  font-size: 13px; line-height: 1.3;
}
.pc-fija-ico { flex: 0 0 32px; height: 32px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--pc-marca); border: 1px solid var(--pc-borde); }
.pc-fija b { font-weight: 700; }
.pc-fija small { display: block; color: var(--pc-gris); font-size: 12px; }

/* ── Las opciones ───────────────────────────────────────────────────────── */
/* Cada opción va en una celda: la tarjeta y, DEBAJO Y AFUERA, el renglón del motivo
   (solo en las filas donde alguna está apagada: las libres lo dejan vacío para que
   las tarjetas de la fila midan lo mismo). */
.pc-opciones { display: grid; gap: 10px; grid-template-columns: repeat(var(--pc-cols, 3), minmax(0, 1fr)); }
.pc-celda { display: flex; flex-direction: column; min-width: 0; }
.pc-op {
  position: relative; appearance: none; -webkit-appearance: none;
  width: 100%; flex: 1 0 auto;
  min-height: 78px; padding: 12px 6px 10px;
  border: 1.5px solid var(--pc-borde); border-radius: 16px; background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: inherit; color: var(--pc-tinta); text-align: center; cursor: pointer;
  box-shadow: 0 6px 16px -14px rgba(42, 36, 33, .5);
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pc-op:active { transform: scale(.97); }
.pc-op:focus-visible { outline: 3px solid rgba(0, 0, 0, .18); outline-offset: 2px; }
.pc-op-titulo { font-size: 18px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.pc-op-sub { font-size: 12px; font-weight: 600; color: var(--pc-gris); line-height: 1.2; min-height: 14px; }
.pc-op-sub small { font-weight: 500; }
/* «de $33.33 a $33.34»: cada mitad entera; en una celda angosta la segunda baja de renglón. */
.pc-op-sub .pc-nb { white-space: nowrap; }

.pc-op-check {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--pc-marca); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px #fff; opacity: 0; transform: scale(.4); transition: opacity .15s, transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.pc-op.is-on {
  border-color: var(--pc-marca);
  background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)), var(--pc-marca);
  box-shadow: 0 10px 22px -16px var(--pc-marca);
}
.pc-op.is-on .pc-op-titulo { color: var(--pc-marca); }
.pc-op.is-on .pc-op-sub { color: var(--pc-tinta); }
.pc-op.is-on .pc-op-check { opacity: 1; transform: scale(1); }

/* La frecuencia: tarjeta ancha con ícono */
.pc-op--ancha { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 12px; min-height: 64px; text-align: left; }
.pc-op--ancha .pc-op-ico { flex: 0 0 34px; height: 34px; border-radius: 10px; background: var(--pc-fondo); display: flex; align-items: center; justify-content: center; color: var(--pc-gris); }
.pc-op--ancha.is-on .pc-op-ico { background: #fff; color: var(--pc-marca); }
.pc-op--ancha .pc-op-titulo { font-size: 15px; }
.pc-op--ancha .pc-op-txt { display: flex; flex-direction: column; gap: 2px; }

/* Bloqueada: se ve, se toca y explica */
.pc-op.is-locked { background: var(--pc-bloq); border-style: dashed; border-color: #DCD2C8; box-shadow: none; }
.pc-op.is-locked .pc-op-titulo { color: #9E9389; }
.pc-op.is-locked .pc-op-sub { color: #B3A99F; }
.pc-op--ancha.is-locked .pc-op-ico { color: #B3A99F; }

/*
 * EL MOTIVO CORTO: afuera de la tarjeta apagada, en UNA línea, con el color de la
 * traba (Plus amarillo con letras blancas · nivel, el de su línea · Prime negro ·
 * el monto de la compra gris).
 * ⚠️ NUNCA DOS LÍNEAS: white-space nowrap y alto fijo. Qué texto entra lo decide
 * ajustarMotivos() (elegir-plan.php) midiendo .pc-motivo-pill contra el ancho de
 * .pc-motivo; por eso la pastilla NO se encoge (flex: 0 0 auto) y el renglón no
 * usa puntos suspensivos: si algo se saliera, se nota en la prueba y no se
 * esconde media palabra.
 * El renglón es 4 px más ancho que la tarjeta por cada lado (se mete en el espacio
 * de 10 px entre columnas; entre dos motivos vecinos quedan 2 px): con eso las
 * etiquetas de dos trabas («N5 Prime + $300») caben a 360 px sin achicar la letra.
 */
.pc-motivo {
  display: flex; justify-content: center; align-items: center;
  height: 20px; margin: 5px -4px 0; min-width: 0; overflow: hidden; cursor: pointer;
}
.pc-motivo:empty { cursor: default; }
.pc-motivo-pill {
  flex: 0 0 auto; display: inline-flex; align-items: stretch; height: 20px;
  border-radius: 999px; overflow: hidden; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: -.005em;
  color: #6E645C; background: #E9E4DF;
}
.pc-motivo-pill > span { display: inline-flex; align-items: center; gap: 3px; padding: 0 4px; }
.pc-motivo-pill > span:first-child { padding-left: 6px; }
.pc-motivo-pill > span:last-child { padding-right: 6px; }
/* El candado va dentro del primer tramo y toma el color de su letra */
.pc-chip-candado { flex: 0 0 auto; opacity: .92; }
.pc-m-gris { background: #E9E4DF; color: #6E645C; font-weight: 600; }
.pc-m-prime { background: #111; color: #fff; font-style: italic; }
.pc-m-plus { background: var(--pc-plus); color: #fff; font-weight: 800; }

/* La pista de que lo apagado se puede tocar */
.pc-pista { display: flex; align-items: center; gap: 6px; margin: 8px 2px 0; font-size: 11.5px; line-height: 1.3; color: var(--pc-gris); }
.pc-pista svg { flex: 0 0 auto; opacity: .75; }

/* ── Tu plan (el resumen vivo) ─────────────────────────────────────────── */
.pc-resumen {
  margin-top: 22px; border-radius: 20px; padding: 16px;
  background: linear-gradient(rgba(255,255,255,.955), rgba(255,255,255,.955)), var(--pc-marca);
  border: 1px solid rgba(0, 0, 0, .06);
  position: relative; overflow: hidden;
}
.pc-resumen::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--pc-marca); }
.pc-resumen-eti { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc-marca); }
.pc-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; }
.pc-fila span { font-size: 13px; color: var(--pc-gris); font-weight: 500; }
.pc-fila b { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.pc-fila-nota { font-size: 12px; color: var(--pc-gris); margin-top: 2px; }
.pc-fila--total { border-top: 1px dashed rgba(0, 0, 0, .15); margin-top: 12px; padding-top: 10px; }
.pc-fila--total span { color: var(--pc-tinta); font-weight: 600; }
.pc-fila--total b { font-size: 16px; }
/* El reparto dejó centavos sueltos: el segundo tramo de cuotas va pegado al primero. */
.pc-fila--sigue { margin-top: 2px; }

.pc-progreso { display: grid; grid-template-columns: repeat(var(--pc-pasos, 3), 1fr); gap: 6px; margin-top: 12px; }
.pc-progreso i { height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .1); transition: background .25s; }
.pc-progreso i.is-on { background: var(--pc-marca); }
.pc-falta-txt { font-size: 13px; color: var(--pc-tinta); margin-top: 10px; font-weight: 500; }

/* ── La hoja que explica una opción bloqueada ──────────────────────────── */
/* ⚠️ top/right/bottom/left y no `inset`: el WebView de Android anterior a Chrome 87 no lo
   entiende y el fondo oscuro no taparía (ni cerraría la hoja al tocarlo). */
.pc-hoja-fondo {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9990; background: rgba(30, 22, 18, .45);
  opacity: 0; transition: opacity .22s ease;
}
.pc-hoja {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9991;
  max-height: 86vh; max-height: 86dvh;   /* dvh: lo visible de verdad en el navegador del teléfono */
  overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 24px 24px 0 0;
  /* El margen seguro de la regla del app (generals.css): 0 dentro de un cascarón, que ya reservó
     la barra del sistema fuera de la página; env() solo en el navegador. Con env() a secas, en el
     iPhone publicado la hoja sumaba 34 px que el cascarón ya había reservado. */
  padding: 10px 20px calc(18px + var(--rk-safe-bottom, 0px));
  transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
  font-family: 'Montserrat', sans-serif; color: #2A2421;
  box-shadow: 0 -12px 32px -12px rgba(0, 0, 0, .3);
}
.pc-hoja:focus { outline: none; }
.pc-hoja-fondo.is-open { opacity: 1; }
.pc-hoja.is-open { transform: translateY(0); }
.pc-hoja-asa { width: 40px; height: 4px; border-radius: 2px; background: #E2DAD3; margin: 0 auto 16px; }
.pc-hoja-arte { display: flex; justify-content: center; margin-bottom: 14px; }
.pc-hoja-arte img { height: 64px; width: auto; border-radius: 10px; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .45); }
.pc-hoja-ico { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #F1ECE7; color: #7A6F68; }
.pc-hoja h4 { font-size: 18px; font-weight: 700; line-height: 1.3; text-align: center; margin: 0; letter-spacing: -.01em; }
.pc-hoja-txt { font-size: 14px; line-height: 1.45; color: #5C534D; text-align: center; margin: 8px 0 0; }
.pc-hoja-txt b { color: #2A2421; }
.pc-hoja-nota { font-size: 12px; line-height: 1.4; color: #8A7F78; text-align: center; margin-top: 12px; }
.pc-hoja-ok {
  display: block; width: 100%; height: 52px; margin-top: 18px; border: 0; border-radius: 10px;
  background: var(--rk-marca, #E74922); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700;
}
.pc-hoja-ok:active { transform: scale(.99); opacity: .92; }
.pc-hoja-ok:focus { outline: none; }
.pc-hoja-ok:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(42, 36, 33, .35); }

/* La pastilla del Status Plus, como en status-plus.php */
.pc-pastilla { display: inline-grid; grid-template-columns: auto auto; border-radius: 10px; overflow: hidden; font-weight: 700; font-size: 15px; box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .5); }
.pc-pastilla span { padding: 9px 16px; }
.pc-pastilla .pc-p-rapikom { background: #fff; color: #F44336; border: 1px solid #EEE; border-right: 0; border-radius: 10px 0 0 10px; }
.pc-pastilla .pc-p-prime { background: #111; color: #fff; font-style: italic; }
.pc-pastilla .pc-p-plus { background: var(--pc-plus); color: #fff; font-weight: 800; }
/* «Status Plus» nombrado dentro de un texto: la misma regla, amarillo con letras blancas */
.pc-plus-marca {
  display: inline-block; padding: 1px 8px 2px; border-radius: 7px; white-space: nowrap;
  background: var(--pc-plus); color: #fff; font-weight: 800; font-size: .93em; line-height: 1.35;
}
/* La estrella del Plus en las listas de la hoja */
.pc-plus-ico { fill: var(--pc-plus); }

/* El camino de niveles: dónde está y dónde se abre */
.pc-camino { display: flex; justify-content: center; align-items: flex-start; gap: 0; margin: 16px auto 4px; max-width: 320px; }
.pc-camino-paso { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; position: relative; }
.pc-camino-paso::before { content: ''; position: absolute; top: 14px; right: 50%; width: 100%; height: 3px; background: #EAE4DE; z-index: 0; }
.pc-camino-paso:first-child::before { display: none; }
.pc-camino-paso.is-hecho::before, .pc-camino-paso.is-hoy::before { background: var(--pc-nv, #FA4515); }
.pc-camino-dot {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: #F1ECE7; color: #A79C94; border: 2px solid #fff;
}
.pc-camino-paso.is-hecho .pc-camino-dot,
.pc-camino-paso.is-hoy .pc-camino-dot { background: var(--pc-nv, #FA4515); color: var(--pc-nv-txt, #fff); }
.pc-camino-paso.is-hoy .pc-camino-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pc-nv, #FA4515); }
.pc-camino-paso.is-meta .pc-camino-dot { background: #fff; color: var(--pc-tinta, #2A2421); border: 2px dashed var(--pc-nv, #FA4515); }
.pc-camino-eti { font-size: 10.5px; font-weight: 700; color: #A79C94; min-height: 13px; }
.pc-camino-paso.is-hoy .pc-camino-eti, .pc-camino-paso.is-meta .pc-camino-eti { color: #2A2421; }

.pc-lista { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.pc-lista li { display: flex; gap: 10px; align-items: flex-start; background: #FAF7F4; border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.4; color: #3F3733; }
.pc-lista li svg { flex: 0 0 18px; margin-top: 1px; }

/* ── Paso 1: «Tu elección» sobre la tarjeta de siempre ─────────────────── */
.pc-eleccion {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 8px; padding: 10px 12px; border-radius: 16px; text-align: left;
  background: #FAF7F4; border: 1px solid #E9E2DB; font-family: inherit; color: #2A2421; cursor: pointer;
}
.pc-eleccion:active { transform: scale(.99); }
.pc-eleccion-ico { flex: 0 0 34px; height: 34px; border-radius: 10px; background: #fff; border: 1px solid #E9E2DB; display: flex; align-items: center; justify-content: center; color: var(--rk-marca, #E74922); }
.pc-eleccion-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-eleccion-txt small { font-size: 11px; color: #7A6F68; font-weight: 600; }
.pc-eleccion-txt b { font-size: 13px; font-weight: 700; line-height: 1.3; }
.pc-eleccion-cta { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--rk-marca, #E74922); display: inline-flex; align-items: center; gap: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pc-op, .pc-op-check, .pc-hoja, .pc-hoja-fondo, .pc-grupo { transition: none; animation: none; }
  .pc-esq div { animation: none; }
}