/* =========================================================================
   Cuentas, planes y Pro con el estilo nuevo (morado + turquesa). Fase 2, área 4.
   Guía: docs/estilo-nuevo.md. Usa los componentes de base.css (.cabeza, .boton, .campo,
   .aviso, .vacio, .pastilla, .bloque-pro, .barra-progreso…) y añade solo lo propio,
   con el prefijo «cu-» para no chocar con nadie.
   Referencias de diseño: planning/estilo-nuevo/fase2/cuentas/MOBBIN.md
   Lo carga Controlador::html en todas las páginas de cuenta (y /planes/).

   1. Acceso (entrar, registro, recuperar, código, confirmar, avisos): tarjeta + lado lila
   2. Botón oficial «Continuar con Google»
   3. Cabecera y pestañas de las páginas de dentro (Mi espacio, ajustes, seguridad…)
   4. Mi espacio: resumen (plan, escenarios, contratos) y tarjetas de escenario
   5. Ajustes, seguridad (QR) y sesiones
   6. Planes: tarjetas, cómo funciona la prueba, tabla gratis/Pro (tarjetas en el móvil), preguntas
   7. Comparar, compartido y administración
   8. Lo que hace falta para que funcione (trampa para robots, QR…)
   ========================================================================= */

/* ---------- 1. Acceso ---------- */
.cu-acceso { padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem) 0 var(--seccion); background: linear-gradient(180deg, var(--lila-50) 0, #fff 26rem); }
.cu-acceso__rejilla { display: grid; gap: var(--e-6); align-items: start; }
.cu-acceso__rejilla > * { min-width: 0; }
@media (min-width: 60rem) {
  .cu-acceso__rejilla { grid-template-columns: minmax(0, 31rem) minmax(0, 28rem); justify-content: center; gap: clamp(2rem, 1rem + 3vw, 4.5rem); }
}
.cu-acceso--sola .cu-acceso__rejilla { grid-template-columns: minmax(0, 32rem); justify-content: center; }
.cu-tarjeta { position: relative; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); border: 1px solid var(--borde); border-radius: var(--r-4); background: #fff; box-shadow: var(--s-2); }
.cu-tarjeta__arriba { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.cu-tarjeta__titulo { margin: 0 0 var(--e-2); font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.35rem); line-height: 1.05; }
.cu-tarjeta__titulo span { color: var(--morado); }
.cu-tarjeta__intro { margin: 0 0 var(--e-4); color: var(--tinta-2); }
.cu-tarjeta--centro { text-align: center; }
.cu-tarjeta--centro .ico3d-pic, .cu-tarjeta--centro > .ico3d { justify-content: center; margin-inline: auto; }
.cu-tarjeta--centro .cu-acciones { justify-content: center; }
.cu-form { display: grid; margin-top: var(--e-4); }
.cu-form > .boton { margin-top: var(--e-2); }
.cu-form--linea { display: inline-flex; margin: 0; }
.cu-form .campo--check { margin: var(--e-2) 0 var(--e-4); }
.cu-form .campo--check label { padding-block: .7rem; font-size: var(--t-sm); }   /* zona de toque de 44 px sin romper el texto */
.cu-form .campo--check input { margin-top: .85rem; }
.cu-campo-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.cu-campo-fila a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; font-size: var(--t-sm); font-weight: 700; }
.campo__opcional { font-weight: 500; color: var(--tinta-2); }
.cu-enlaces { margin: var(--e-5) 0 0; padding-top: var(--e-4); border-top: 1px solid var(--borde); text-align: center; font-size: var(--t-sm); color: var(--tinta-2); }
.cu-enlaces a { font-weight: 700; }
.cu-acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; margin-top: var(--e-4); }
.cu-separador { display: flex; align-items: center; gap: var(--e-3); margin: var(--e-4) 0 0; color: var(--tinta-2); font-size: var(--t-xs); font-weight: 600; }
.cu-separador::before, .cu-separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.cu-legal { margin: var(--e-2) 0 0; font-size: var(--t-xs); color: var(--tinta-2); text-align: center; }
.cu-paso { margin: 0; font: 800 1rem/1.3 var(--f); letter-spacing: .06em; text-transform: uppercase; color: var(--etiqueta); }

/* Oferta Pro dentro de la tarjeta de registro (?plan=pro) */
.cu-oferta { margin: 0 0 var(--e-4); padding: .9rem 1rem; border-radius: var(--r-3); color: #fff; background: radial-gradient(18rem 9rem at 100% 0%, rgb(147 54 254 / .55), transparent 70%), linear-gradient(110deg, var(--cab-1), var(--cab-2) 60%, #4a1890); }
.cu-oferta__arriba { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .35rem; }
.cu-oferta__texto { margin: 0 0 .55rem; font-weight: 700; line-height: 1.35; }
.cu-oferta__plazas { margin: .45rem 0 0; font-size: var(--t-xs); font-weight: 700; color: rgb(255 255 255 / .9); }
.cu-oferta .barra-progreso { height: 7px; }
.cu-turquesa { color: var(--turquesa); font-weight: 800; }

/* Lado lila con lo que te llevas (registro y entrar) */
.cu-lado { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.4rem, 1rem + 2vw, 2.2rem); border-radius: var(--r-4); background: linear-gradient(160deg, #f5eefe 0%, #eee3fd 60%, #e2d1fc 100%); }
.cu-lado__titulo { margin: var(--e-3) 0 var(--e-4); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); line-height: 1.08; }
.cu-lado__titulo span { color: var(--morado); }
.cu-ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.cu-ventajas li { display: grid; grid-template-columns: 40px 1fr; gap: .75rem; align-items: start; padding: .7rem .8rem; border-radius: var(--r-2); background: rgb(255 255 255 / .82); box-shadow: 0 1px 2px rgb(27 11 62 / .05); font-size: 1rem; }
.cu-ventajas li strong { display: block; color: var(--tinta); }
.cu-ventajas li span { color: var(--tinta-2); font-size: var(--t-sm); }
.cu-ventajas .ico3d { --ico: 40px; }
.cu-lado .cu-linea { margin-top: var(--e-5); }
@media (max-width: 59.99rem) { .cu-lado__titulo { font-size: 1.4rem; } }

/* Línea de tiempo de la prueba Pro (registro y planes) */
.cu-linea { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: cu-paso; }
.cu-linea li { position: relative; padding: 0 0 1rem 2.6rem; font-size: 1rem; color: var(--tinta-2); }
.cu-linea li::before { counter-increment: cu-paso; content: counter(cu-paso); position: absolute; left: 0; top: -.1rem; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--morado); color: var(--morado); font-weight: 800; font-size: 1rem; }
.cu-linea li::after { content: ""; position: absolute; left: 14px; top: 1.9rem; bottom: .15rem; width: 2px; background: var(--lila-200); }
.cu-linea li:last-child { padding-bottom: 0; }
.cu-linea li:last-child::after { display: none; }
.cu-linea li strong { display: block; color: var(--tinta); }

/* ---------- 2. Botón «Continuar con Google» (normas de marca de Google: blanco, borde gris, G de colores) ---------- */
.boton-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; padding: .6rem 1rem; border: 1px solid #747775; border-radius: var(--r-2); background: #fff; color: #1f1f1f; font: 500 1rem/1.25 Roboto, "Segoe UI", Arial, sans-serif; letter-spacing: .01em; text-decoration: none; transition: background-color var(--transicion), box-shadow var(--transicion); }
.boton-google:hover { background: #f8f8f8; color: #1f1f1f; box-shadow: 0 1px 3px rgb(60 64 67 / .3); text-decoration: none; }
.boton-google:focus-visible { outline: 3px solid var(--morado); outline-offset: 2px; }
.boton-google__g { width: 20px; height: 20px; flex: none; }
.cu-bloque .boton-google { max-width: 24rem; }

/* ---------- 3. Cabecera y pestañas de las páginas de dentro ---------- */
.cu-cabeza { padding-top: 0; padding-bottom: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.cu-cabeza .migas { padding-top: var(--e-4); margin-bottom: var(--e-3); }
.cu-cabeza .cabeza__rejilla { gap: var(--e-4); }
.cu-cabeza .cabeza__titulo { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); max-width: 22ch; }
.cu-cabeza .cabeza__entradilla { margin-top: .7rem; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
/* El icono: .cabeza__icono de base.css (mismo tamaño que en las demás cabeceras; en el móvil, arriba a la derecha) */
@media (min-width: 64rem) { .cu-cabeza .cabeza__rejilla { grid-template-columns: minmax(0, 1fr) auto; } }
.cu-pestanas { position: relative; z-index: 2; border-bottom: 1px solid var(--borde); background: #fff; }
.cu-pestanas ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cu-pestanas ul::-webkit-scrollbar { display: none; }
.cu-pestanas li { flex: none; }
.cu-pestanas a { display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: .5rem .85rem; border-bottom: 3px solid transparent; color: var(--tinta-2); font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.cu-pestanas a:hover { color: var(--morado); background: var(--lila-50); }
.cu-pestanas a[aria-current="page"] { color: var(--morado); border-bottom-color: var(--morado); }
.cu-pestanas .ico3d { --ico: 24px; }
.cu-pestanas__salir { margin-left: auto; }
.cu-cuerpo { padding-block: var(--e-6) var(--seccion); }
.cu-cuerpo > .contenedor > .aviso:first-child { margin-top: 0; }

/* ---------- 4. Mi espacio ---------- */
.cu-resumen { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin: 0 0 var(--e-7); }
.cu-dato { display: flex; flex-direction: column; gap: .45rem; padding: 1.15rem 1.2rem; border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-1); }
.cu-dato__cabeza { display: flex; align-items: center; gap: .7rem; }
.cu-dato__cabeza .ico3d { --ico: 44px; }
.cu-dato__etiqueta { margin: 0; font: 800 1rem/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--etiqueta); }
.cu-dato__valor { margin: 0; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; color: var(--tinta); }
.cu-dato__texto { margin: 0; font-size: var(--t-sm); color: var(--tinta-2); }
.cu-dato .barra-progreso { background: var(--lila-100); }
.cu-dato .barra-progreso > span { background: linear-gradient(90deg, var(--morado), var(--morado-vivo)); }
.cu-dato .barra-progreso.is-lleno > span { background: linear-gradient(90deg, var(--rojo), #e04565); }
.cu-dato__acciones { margin-top: auto; padding-top: .4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cu-dato--pro { color: #fff; border: 0; background: radial-gradient(20rem 10rem at 100% 0%, rgb(147 54 254 / .5), transparent 70%), linear-gradient(110deg, var(--cab-1), var(--cab-2) 60%, #4a1890); box-shadow: var(--s-2); }
.cu-dato--pro .cu-dato__etiqueta { color: var(--turquesa); }
.cu-dato--pro .cu-dato__valor { color: #fff; }
.cu-dato--pro .cu-dato__texto { color: rgb(255 255 255 / .86); }
.cu-seccion-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-5); margin-bottom: var(--e-4); }
.cu-seccion-cabeza h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.cu-seccion-cabeza p { margin: .35rem 0 0; color: var(--tinta-2); font-size: var(--t-sm); }
.cu-filtro { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 var(--e-4); }
.cu-filtro .chip { min-height: 44px; }
.cu-comparar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin: 0 0 var(--e-4); padding: .75rem 1rem; border-radius: var(--r-2); background: var(--lila-50); border: 1px solid var(--borde); font-size: var(--t-sm); color: var(--tinta-2); }
.cu-comparar p { margin: 0; flex: 1 1 16rem; }
.cu-escenarios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.cu-escenario { display: flex; flex-direction: column; gap: var(--e-3); padding: 1.1rem 1.15rem; border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-1); scroll-margin-top: calc(var(--cabecera-alto) + 1rem); transition: box-shadow var(--transicion), border-color var(--transicion); }
.cu-escenario:hover { box-shadow: var(--s-2); }
.cu-escenario:has(.cu-escenario__marcar:checked) { border-color: var(--morado); box-shadow: 0 0 0 2px var(--lila-200), var(--s-1); }
.cu-escenario__cabeza { display: grid; grid-template-columns: 40px 1fr auto; gap: .2rem .75rem; align-items: center; }
.cu-escenario__cabeza .ico3d { --ico: 40px; grid-row: 1 / span 2; }
.cu-escenario__titulo { margin: 0; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.02em; overflow-wrap: anywhere; }
.cu-escenario__meta { grid-column: 2; margin: 0; font-size: var(--t-xs); color: var(--tinta-2); }
.cu-escenario__marca { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -6px -6px -6px 0; border-radius: 10px; cursor: pointer; }
.cu-escenario__marca:hover { background: var(--lila-50); }
.cu-escenario__marcar { width: 1.25rem; height: 1.25rem; accent-color: var(--morado); cursor: pointer; }
.cu-escenario__resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .9rem; margin: 0; padding: .85rem .95rem; border-radius: var(--r-2); background: var(--lila-50); }
.cu-escenario__resumen dt { font-size: var(--t-xs); color: var(--tinta-2); font-weight: 600; }
.cu-escenario__resumen dd { margin: .1rem 0 0; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cu-escenario__resumen div:first-child dd { color: var(--morado); font-size: 1.15rem; }
.cu-escenario__acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: auto; }
.cu-escenario__mas { flex: 1 1 100%; }
.cu-escenario__mas > summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .4rem; border-radius: 10px; font-size: var(--t-sm); font-weight: 700; color: var(--morado); cursor: pointer; list-style: none; }
.cu-escenario__mas > summary::-webkit-details-marker { display: none; }
.cu-escenario__mas > summary:hover { background: var(--lila-50); }
.cu-escenario__mas[open] > summary .icono { transform: rotate(180deg); }
.cu-escenario__mas .icono { transition: transform var(--transicion); }
.cu-escenario__form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-top: .6rem; }
.cu-escenario__form .campo { flex: 1 1 12rem; margin: 0; }
.cu-escenario__compartir { display: grid; gap: .45rem; padding: .75rem .85rem; border-radius: var(--r-2); border: 1px dashed var(--borde-campo); font-size: var(--t-sm); }
.cu-escenario__compartir label { font-weight: 600; color: var(--tinta-2); }
.cu-escenario__compartir div { display: flex; gap: .45rem; }
.cu-escenario__compartir input { flex: 1; min-width: 0; min-height: 44px; padding: .4rem .6rem; border: 1.5px solid var(--borde-campo); border-radius: 10px; font: 500 1rem var(--f); color: var(--tinta-2); background: #fff; }

/* ---------- 5. Ajustes, seguridad y sesiones ---------- */
.cu-bloques { display: grid; gap: var(--e-5); max-width: 52rem; }
.cu-bloque { padding: clamp(1.2rem, 1rem + 1.4vw, 1.9rem); border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-1); scroll-margin-top: calc(var(--cabecera-alto) + 1rem); }
.cu-bloque__cabeza { display: flex; align-items: center; gap: .8rem; margin: 0 0 var(--e-4); }
.cu-bloque__cabeza .ico3d { --ico: 44px; }
.cu-bloque__cabeza h2 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.cu-bloque__cabeza p { margin: .15rem 0 0; font-size: var(--t-sm); color: var(--tinta-2); }
.cu-bloque > p { color: var(--tinta-2); }
.cu-bloque .cu-form { margin-top: 0; max-width: 30rem; }
.cu-bloque--peligro { border-color: #f3c3cd; background: linear-gradient(180deg, #fff, #fff8f9); }
.cu-estado { display: inline-flex; align-items: center; gap: .4rem; }
/* Activar el segundo factor: pasos + QR (con la clave para copiar al lado) */
.cu-2fa { display: grid; gap: var(--e-5); }
@media (min-width: 44rem) { .cu-2fa { grid-template-columns: auto minmax(0, 1fr); align-items: start; } }
.cu-2fa__qr { display: grid; justify-items: center; gap: .6rem; padding: 1rem; border-radius: var(--r-3); background: var(--lila-50); border: 1px solid var(--borde); }
.cu-2fa__pasos { margin: 0 0 var(--e-4); padding-left: 1.3rem; display: grid; gap: .45rem; color: var(--tinta-2); }
.cu-2fa__pasos li::marker { color: var(--morado); font-weight: 800; }
.cu-2fa__clave { display: grid; gap: .45rem; margin: 0 0 var(--e-4); padding: .75rem .85rem; border-radius: var(--r-2); border: 1px dashed var(--borde-campo); font-size: var(--t-sm); color: var(--tinta-2); }
.cu-2fa__clave div { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.cu-2fa__clave input { flex: 1 1 12rem; min-width: 0; min-height: 44px; padding: .4rem .6rem; border: 1.5px solid var(--borde-campo); border-radius: 10px; background: #fff; font: 700 1rem/1.3 ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--tinta); }
.cu-respaldo { padding: 1rem 1.1rem; border-radius: var(--r-3); background: var(--ambar-fondo); color: var(--ambar-texto); }
.cu-respaldo p { margin: 0 0 .6rem; }
.cu-respaldo .codigos { margin: 0 0 .8rem; color: var(--tinta); }
.cu-respaldo .codigos code { display: inline-block; padding: .2rem .45rem; border-radius: 6px; background: rgb(255 255 255 / .7); font-size: 1rem; }
.cu-sesiones { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: .55rem; }
.cu-sesion { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: .8rem .95rem; border: 1px solid var(--borde); border-radius: var(--r-2); background: #fff; font-size: var(--t-sm); }
.cu-sesion--actual { border-color: var(--morado); background: var(--lila-50); }
.cu-sesion__agente { overflow-wrap: anywhere; font-weight: 600; color: var(--tinta); }
.cu-sesion__fecha { grid-column: 1; color: var(--tinta-2); font-size: var(--t-xs); }
.cu-sesion > .pastilla, .cu-sesion > form { grid-column: 2; grid-row: 1 / span 2; }
.cu-sesion .boton--enlace { min-height: 44px; padding: 0 .4rem; }

/* ---------- 6. Planes ---------- */
.cu-planes-cabeza .cabeza__titulo { max-width: 16ch; }
.cu-planes-cabeza .cabeza__lado { display: none; }
.cu-planes-cabeza { padding-bottom: clamp(5rem, 3rem + 5vw, 8rem); }
.cu-planes-cabeza .migas { padding-top: 0; margin-bottom: var(--e-4); }
.cu-planes-seccion { padding-top: 0; }
@media (min-width: 64rem) { .cu-planes-cabeza .cabeza__lado { display: grid; justify-items: end; } }
.cu-planes { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); max-width: 62rem; margin-inline: auto; }
.cu-plan { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: clamp(1.3rem, 1rem + 1.4vw, 2rem); border: 1px solid var(--borde); border-radius: var(--r-4); background: #fff; box-shadow: var(--s-2); }
.cu-plan__nombre { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.6rem; }
.cu-plan__nombre .ico3d { --ico: 48px; }
.cu-plan__precio { margin: .2rem 0 0; font-weight: 800; font-size: var(--t-cifra); line-height: 1; letter-spacing: -.04em; }
.cu-plan__precio small { display: block; margin-top: .35rem; font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.cu-plan__texto { margin: 0; color: var(--tinta-2); }
.cu-plan__lista { list-style: none; margin: .4rem 0 .6rem; padding: 0; display: grid; gap: .5rem; font-size: 1rem; }
.cu-plan__lista li { display: grid; grid-template-columns: 22px 1fr; gap: .55rem; align-items: start; }
.cu-plan__lista .icono { width: 20px; height: 20px; margin-top: .1em; color: var(--verde-texto); }
.cu-plan__accion { margin-top: auto; display: grid; gap: .5rem; }
.cu-plan__nota { margin: 0; font-size: var(--t-xs); color: var(--tinta-2); text-align: center; }
.cu-plan__estado { margin: 0; padding: .7rem .9rem; border-radius: var(--r-2); background: var(--verde-fondo); color: var(--verde-texto); font-weight: 700; text-align: center; }
.cu-plan--pro { color: #fff; border: 0; background: radial-gradient(26rem 14rem at 100% 0%, rgb(147 54 254 / .55), transparent 70%), radial-gradient(18rem 12rem at 0% 100%, rgb(26 255 224 / .12), transparent 70%), linear-gradient(120deg, var(--cab-1), var(--cab-2) 55%, #4a1890); box-shadow: var(--s-3); }
.cu-plan--pro .cu-plan__nombre, .cu-plan--pro .cu-plan__precio { color: #fff; }
.cu-plan--pro .cu-plan__precio { color: var(--turquesa); }
.cu-plan--pro .cu-plan__precio small { color: rgb(255 255 255 / .86); }
.cu-plan--pro .cu-plan__texto, .cu-plan--pro .cu-plan__nota { color: rgb(255 255 255 / .84); }
.cu-plan--pro .cu-plan__lista .icono { color: var(--turquesa); }
.cu-plan--pro .cu-plan__estado { background: rgb(26 255 224 / .15); color: #fff; }
.cu-plan__cinta { position: absolute; top: -.85rem; right: 1.2rem; }
.cu-plazas { display: grid; gap: .45rem; padding: .8rem .9rem; border-radius: var(--r-2); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); font-size: var(--t-sm); font-weight: 700; }
.cu-plazas p { margin: 0; }
.cu-plazas b { color: var(--turquesa); }
.cu-plan--pro .cu-form .campo label { color: #fff; }
.cu-plan--pro .campo__ayuda { color: rgb(255 255 255 / .8); }
.cu-como { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 60rem) { .cu-como { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.cu-como .cu-linea li { font-size: 1rem; padding-bottom: 1.4rem; }
.cu-tabla-planes { margin-top: var(--e-5); }
.cu-tabla-planes table { min-width: 36rem; }
.cu-tabla-planes th[scope="row"] { font-weight: 700; color: var(--tinta); }
.cu-tabla-planes th[scope="row"] small { display: block; margin-top: .15rem; font-size: var(--t-xs); font-weight: 500; color: var(--tinta-2); }
.cu-tabla-planes thead th { font-size: var(--t-sm); text-align: center; }
.cu-tabla-planes thead th:first-child { text-align: left; }
.cu-tabla-planes td { text-align: center; vertical-align: middle; font-weight: 600; }
.cu-tabla-planes td:last-child { background: var(--lila-50); color: var(--morado); font-weight: 800; }
.cu-si, .cu-no { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.cu-si .icono { width: 22px; height: 22px; color: var(--verde-texto); stroke-width: 2.4; }
.cu-no { color: var(--tinta-2); font-weight: 500; }
/* En el móvil, la tabla pasa a tarjetas (una por función) */
.cu-tarjetas-planes { display: none; list-style: none; margin: var(--e-5) 0 0; padding: 0; gap: .65rem; }
.cu-tarjetas-planes li { padding: .9rem 1rem; border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-1); }
.cu-tarjetas-planes strong { display: block; color: var(--tinta); }
.cu-tarjetas-planes small { display: block; margin-top: .1rem; font-size: var(--t-xs); color: var(--tinta-2); }
.cu-tarjetas-planes dl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .65rem 0 0; }
.cu-tarjetas-planes dl div { padding: .5rem .6rem; border-radius: var(--r-2); background: var(--lila-50); }
.cu-tarjetas-planes dl div:last-child { background: var(--lila-100); }
.cu-tarjetas-planes dt { font: 800 1rem/1.3 var(--f); letter-spacing: .05em; text-transform: uppercase; color: var(--etiqueta); }
.cu-tarjetas-planes dd { margin: .15rem 0 0; font-weight: 700; font-size: 1rem; }
@media (max-width: 39.99rem) {
  .cu-tabla-planes { display: none; }
  .cu-tarjetas-planes { display: grid; }
}
.cu-faq { max-width: 52rem; display: grid; gap: .6rem; }
.cu-faq details { border: 1px solid var(--borde); border-radius: var(--r-3); background: #fff; box-shadow: var(--s-1); }
.cu-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 56px; padding: .8rem 1.1rem; font-weight: 800; font-size: 1.02rem; cursor: pointer; list-style: none; }
.cu-faq summary::-webkit-details-marker { display: none; }
.cu-faq summary .icono { flex: none; color: var(--morado); transition: transform var(--transicion); }
.cu-faq details[open] summary .icono { transform: rotate(180deg); }
.cu-faq details > div { padding: 0 1.1rem 1rem; color: var(--tinta-2); }
.cu-faq details > div p:last-child { margin-bottom: 0; }

/* ---------- 7. Comparar, compartido y administración ---------- */
.cu-comparar-tabla th[scope="row"] { font-weight: 700; }
.cu-comparar-tabla thead th { white-space: normal; }
.cu-comparar-tabla + .cu-comparar-tabla, .tabla-scroll + .tabla-scroll { margin-top: var(--e-5); }
.cu-compartido-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .7rem; margin: 0 0 var(--e-5); }
.cu-compartido-datos div { padding: .85rem 1rem; border-radius: var(--r-3); border: 1px solid var(--borde); background: #fff; box-shadow: var(--s-1); }
.cu-compartido-datos dt { font-size: var(--t-xs); font-weight: 700; color: var(--tinta-2); }
.cu-compartido-datos dd { margin: .2rem 0 0; font-weight: 800; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.cu-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: .6rem; margin: 0 0 var(--e-6); }
.cu-cifras div { padding: .8rem .9rem; border: 1px solid var(--borde); border-radius: var(--r-2); background: #fff; box-shadow: var(--s-1); }
.cu-cifras dt { font-size: var(--t-xs); color: var(--tinta-2); font-weight: 600; }
.cu-cifras dd { margin: .15rem 0 0; font-weight: 800; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.cu-admin-buscar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: 0 0 var(--e-4); }
.cu-admin-buscar .campo { flex: 1 1 16rem; margin: 0; }
.cu-admin-tabla td form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0; }
.cu-admin-tabla select, .cu-admin-tabla input[type="date"] { min-height: 40px; padding: .3rem .5rem; border: 1.5px solid var(--borde-campo); border-radius: 8px; font: inherit; background: #fff; }
.cu-admin-tabla small { color: var(--tinta-2); }
.cu-lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: var(--t-sm); }
.cu-lista-simple li { padding: .6rem .8rem; border: 1px solid var(--borde); border-radius: var(--r-2); background: #fff; overflow-wrap: anywhere; }
.cu-paginacion { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: var(--e-4); }
.cu-paginacion a { display: grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--borde); border-radius: 10px; text-decoration: none; font-weight: 700; }
.cu-paginacion a[aria-current] { background: var(--morado); border-color: var(--morado); color: #fff; }

/* Iconos 3D del área: el tamaño sale del ancho que se pide en ti_ico3d() (base.css deja 48 px si no se dice) */
.ico3d[width="24"] { --ico: 24px; } .ico3d[width="40"] { --ico: 40px; } .ico3d[width="44"] { --ico: 44px; } .ico3d[width="56"] { --ico: 56px; }
.ico3d[width="64"] { --ico: 64px; } .ico3d[width="96"] { --ico: 96px; } .ico3d[width="128"] { --ico: 128px; } .ico3d[width="140"] { --ico: 140px; }

/* ---------- 8. Para que funcione ---------- */
/* Trampa para robots del registro y de la lista de espera: invisible para las personas */
.campo--trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* QR del segundo factor: fondo blanco siempre para que la cámara lo lea */
.qr { display: inline-block; background: #fff; padding: 8px; line-height: 0; border-radius: 10px; box-shadow: var(--s-1); }
.qr svg { width: 220px; height: auto; max-width: 100%; }
.clave-texto { word-break: break-all; }
.codigos { columns: 2; list-style: none; padding-left: 0; font-family: ui-monospace, Consolas, monospace; }
@media print { .cu-pestanas, .cu-cabeza__lado { display: none !important; } }

/* ---------- 9. Móvil (revisión 04-11: planning/estilo-nuevo/fase2/cuentas/MOVIL.md) ----------
   Todo lo que se toca, de 44 px como mínimo (base.css deja .boton--pequeno en 42 px: aquí se sube en el área 4). */
:is(.cu-acceso, .cu-cuerpo, .cu-planes-seccion, .franja, .panel-pro) .boton--pequeno { min-height: 44px; }
.cu-tarjeta .boton, .cu-dato .boton, .cu-bloque .boton, .cu-escenario .boton, .cu-comparar .boton { white-space: normal; }
.cu-admin-tabla select, .cu-admin-tabla input[type="date"] { min-height: 44px; }
.cu-admin-tabla .boton--enlace, .cu-sesion .boton--enlace { min-height: 44px; padding-inline: .3rem; }
.enlace-fuerte { min-height: 44px; }
/* Fondos del kit (dibujo a la derecha): en pantallas estrechas el dibujo quedaría debajo del texto; solo desde 64 rem */
@media (max-width: 63.99rem) { .cu-cabeza, .cu-planes-cabeza { --cabeza-fondo: none; } }

/* Repaso móvil final (05-11): «Volver a Entrar» y enlaces sueltos de los formularios, tocables de 44 px */
.cu-enlaces a { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; }