/* Hey Coni · preparar mi marca (/preparar, /entrar, /unirse, /restablecer): la capa propia de la preparación, sobre tema.css
   y coni.css (rebranding Coni, FASE 2; criterios en diseno/rebranding-coni/criterios-fase-2.md, decisiones D1-D8).
   Dueño: el agente de la preparación. Solo usa var(--coni-*) de tema.css y las constantes de coni.css (--coni-tactil,
   --coni-objetivo-min, --coni-columna); los botones, los campos (con la excepción D6), las notas y los avisos por estado,
   los plegables, el logo, el foco y el título de pantalla son los componentes comunes de coni.css. Todo lo que la
   preparación tomaba de Taller (títulos, enlaces, .acciones, .fila, las listas, los textareas, el cambio de paso) está aquí;
   tokens.css y taller.css se quitaron al cerrar la FASE 2.

   Lo que se cumple aquí: alineado a la izquierda sobre una retícula fija (la columna a 96 px del borde, o de los pasos,
   hasta 680 px; 16 px en el celular); todo en Inter, con los títulos de pantalla en 700 (.coni-titulo-pantalla); la
   pregunta en 28/500 (22/500 en el celular, 20-10), con su instrucción aparte, en la ayuda; la selección con borde de 2 px en mandarina (el relleno baja 1 px: nada salta) y el
   indicador propio; la mandarina solo en la acción principal, la selección y el foco; «pendiente» en el amarillo de aviso
   (D2) y el rojo solo para errores, siempre con texto; sin sombras, degradados, transparencias ni rayas de adorno; los
   plegables con el chevron de Lucide que no gira; el cambio de paso con el movimiento del sistema (24 px y 320 ms en la
   dirección del avance; la pantalla que sale no se mueve).
   Lo que no se mueve: elegir una opción cambia solo el borde y el indicador; una respuesta sin guardar pinta una raya que
   ya existía transparente; la línea de paso, la de lo que falta y el indicador de guardado ocupan siempre una línea. */

/* ---- constantes de maquetación de esta capa: el alto de la barra (44 del botón + 2 × 8 + 1 de línea), el ancho del
   formulario de acceso y las columnas de los pasos y de «Tu marca hasta ahora» ---- */
:root{--coni-barra:calc(var(--coni-tactil) + 2 * var(--coni-espacio-2) + var(--coni-borde-ancho));
  --coni-acceso-formulario:440px;--coni-pasos:184px;--coni-resumen:280px}

/* ---- base: lo que antes daba taller.css (ya quitado) ---- */
.preparar main:focus{outline:none}
/* lo oculto se oculta siempre, aunque su clase le dé display; el logo SVG va con hidden y lo muestra coni.css */
.preparar [hidden]:not(.logo-marca){display:none !important}
/* un destino del foco (tabindex=-1: el título al cambiar de pantalla, una pregunta, la región del mensaje) no es un control:
   no lleva anillo */
.preparar [tabindex="-1"]:focus{outline:none}
html{scroll-padding-top:calc(var(--coni-barra) + var(--coni-espacio-3))}
.preparar h1,.preparar h2,.preparar h3,.preparar h4{margin:0;text-wrap:balance}
.preparar .fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coni-espacio-2)}
.preparar .acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coni-espacio-2);margin-top:var(--coni-espacio-6)}
.preparar ul.lista{margin:var(--coni-espacio-2) 0 0;padding-left:var(--coni-espacio-6)}
.preparar ul.lista li{margin-bottom:var(--coni-espacio-1)}
.preparar .btn[aria-busy="true"]{cursor:progress}
.preparar .ocupado,.preparar .ocupado:not(:empty){background:transparent;padding:0;margin:0;color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.sin-cortar{white-space:nowrap}                     /* una fecha (27-09-2026) no se parte por sus guiones */
/* enlace dentro de un texto: el azul de enlace de Coni, 500, subrayado también sin el ratón (el azul contra la tinta no llega
   a 3:1: el color solo no alcanza, WCAG 1.4.1); al pasar, el subrayado engrosa */
.preparar p a:not([class]){color:var(--coni-info-texto);font-weight:var(--coni-peso-medio);text-decoration:underline;
  text-decoration-thickness:var(--coni-borde-ancho);text-underline-offset:var(--coni-espacio-1)}
@media (hover:hover){.preparar p a:not([class]):hover{text-decoration-thickness:var(--coni-foco-ancho)}}

/* ---- «Saltar al contenido»: un botón secundario que aparece al llegar con el teclado ---- */
.saltar{position:absolute;left:var(--coni-espacio-4);top:var(--coni-espacio-2);z-index:50;display:inline-flex;align-items:center;
  min-height:var(--coni-tactil);padding:0 var(--coni-espacio-4);border:var(--coni-borde-ancho) solid var(--coni-borde);
  border-radius:var(--coni-radio-pastilla);background:var(--coni-superficie);color:var(--coni-tinta);text-decoration:none;
  font:var(--coni-peso-medio) var(--coni-texto-chico)/1 var(--coni-fuente-ui);transform:translateY(-200%)}
.saltar:focus{transform:none}

/* ---- barra: fija arriba, fuera de lo que cambia de paso; el logo SVG «Hey Coni» (compacto en claro, el de oscuro en
   oscuro), el tema con el ícono de Lucide y «Salir» como botón fantasma.
   El logo arranca donde arranca el contenido de la pantalla (20-10, cruce del 19-10 §5, tema 3), según el tipo de
   pantalla y no según si se ve el índice: a 96 px en el acceso, en «Cargando…» y en los pasos entre 821 y 1023 px (la
   columna, a 96); a 40 desde 1024 px en las pantallas de una marca (los pasos a la izquierda o, entre 1024 y 1279 con
   «Tu marca hasta ahora», la columna misma, que ahí arranca a 40); a 16 en el celular. El aviso de «Salir», igual ---- */
.p-barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--coni-espacio-3);
  min-height:var(--coni-barra);padding:var(--coni-espacio-2) var(--coni-espacio-10) var(--coni-espacio-2) var(--coni-espacio-24);
  border-bottom:var(--coni-borde-ancho) solid var(--coni-borde);
  background:var(--coni-fondo);view-transition-name:p-barra}
@media (min-width:1024px){
  body:has(.p-marco.con-indice) .p-barra,body:has(.p-marco.con-indice) .p-aviso-salir{padding-left:var(--coni-espacio-10)}
}
.p-barra .logo{display:inline-flex;align-items:center;min-height:var(--coni-tactil);margin:0;padding:0;
  font:var(--coni-peso-medio) var(--coni-texto-base)/1 var(--coni-fuente-ui)}
.p-barra-acciones{display:flex;align-items:center;gap:var(--coni-espacio-1)}
/* el botón del tema: sin el fondo ni el borde del navegador */
.p-barra .tema-boton{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave)}
@media (hover:hover){.p-barra .tema-boton:hover{background:var(--coni-superficie)}}
.p-barra .btn.suave{min-height:var(--coni-tactil);padding:0 var(--coni-espacio-4);font-size:var(--coni-texto-chico)}
.p-aviso-salir{padding:var(--coni-espacio-4) var(--coni-espacio-10) 0 var(--coni-espacio-24)}
.p-aviso-salir .aviso{margin:0;flex-wrap:wrap}
.p-aviso-salir .aviso .fila{gap:var(--coni-espacio-2)}

/* ---- el cambio de pantalla (View Transition; movimiento.js decide cuándo): la pantalla nueva entra con fundido y 24 px en
   la dirección del avance, 320 ms, curva de entrada (coni-pantalla-entra de tema.css; al volver, desde el otro lado:
   coni-pantalla-vuelve, también de tema.css); la que
   sale no se mueve. La barra y «Tu marca hasta ahora» no se animan. Con reducir movimiento, un fundido de 120 ms ---- */
#principal{view-transition-name:principal}
::view-transition{pointer-events:none}
::view-transition-group(root){animation:none}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-group(principal){animation:none}
::view-transition-group(p-barra){animation:none;z-index:1}
::view-transition-old(p-barra),::view-transition-new(p-barra){animation:none}
::view-transition-group(p-resumen),::view-transition-old(p-resumen),::view-transition-new(p-resumen){animation:none}
::view-transition-old(principal){animation:none;display:none}
::view-transition-new(principal){animation:var(--coni-dur-pantalla) var(--coni-curva-entrada) both coni-pantalla-entra}
html[data-direccion="atras"]::view-transition-new(principal){animation-name:coni-pantalla-vuelve}

/* ---- marco (desde el 27-10, centrado en el computador: ver el final de este archivo): la columna, hasta 680 px; desde 1024 px, «Tu marca hasta
   ahora» a la derecha y, en la revisión y la confirmación, los pasos a la izquierda (con la columna a 96 px de ellos); desde
   1280 px, los dos. Por debajo de 821 px, márgenes de 16 ---- */
.p-marco{width:100%;padding:var(--coni-espacio-12) var(--coni-espacio-10) var(--coni-espacio-24) var(--coni-espacio-24)}
.p-columna{min-width:0;width:100%;max-width:var(--coni-columna)}
.p-indice{display:none}
@media (min-width:1024px){
  .p-marco.con-indice{display:grid;grid-template-columns:var(--coni-pasos) var(--coni-espacio-24) minmax(0,var(--coni-columna));
    justify-content:start;padding-left:var(--coni-espacio-10)}
  .p-marco.con-indice .p-indice:not([hidden]){display:block;grid-column:1;position:sticky;top:calc(var(--coni-barra) + var(--coni-espacio-12));align-self:start}
  .p-marco.con-indice .p-columna{grid-column:3}
  .p-saltar{display:none}
}

/* ---- los pasos (índice): número, nombre y estado en texto; el paso actual como la navegación de la app (superficie y
   borde de 1 px), sin barras ni porcentajes ---- */
.p-pasos{list-style:none;margin:0;padding:0;display:grid;gap:var(--coni-espacio-1)}
.p-pasos a{display:grid;align-content:center;gap:var(--coni-espacio-1);min-height:var(--coni-tactil);padding:var(--coni-espacio-2) var(--coni-espacio-3);
  border:var(--coni-borde-ancho) solid transparent;border-radius:var(--coni-radio-l);text-decoration:none;color:var(--coni-tinta-2);
  font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui);
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave),border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
.p-pasos a[aria-current="step"]{background:var(--coni-superficie);border-color:var(--coni-borde);color:var(--coni-tinta)}
@media (hover:hover){.p-pasos a:hover{background:var(--coni-superficie);color:var(--coni-tinta)}}
.p-paso-estado{font-weight:var(--coni-peso-regular);color:var(--coni-tinta-2)}
.p-paso-estado.pend{color:var(--coni-aviso-texto)}          /* D2: «Sin guardar», «Faltan N» en la revisión, siempre en texto */
.p-pasos .p-paso-mejorar{margin-top:var(--coni-espacio-2)}

/* ---- arriba de la columna: el paso (etiqueta 12/600 en mayúsculas), la marca, lo que falta y el guardado; en el flujo ---- */
.p-progreso{display:grid;gap:var(--coni-espacio-1);margin-bottom:var(--coni-espacio-10);padding-bottom:var(--coni-espacio-3);
  border-bottom:var(--coni-borde-ancho) solid var(--coni-borde)}
.p-paso-linea{margin:0;color:var(--coni-tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
#linea-paso-donde{text-transform:uppercase;letter-spacing:var(--coni-etiqueta-tracking);
  font:var(--coni-peso-semi) var(--coni-texto-etiqueta)/var(--coni-texto-etiqueta-interlinea) var(--coni-fuente-ui)}
.p-faltan-linea{color:var(--coni-tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.p-saltar>summary{min-height:var(--coni-tactil);color:var(--coni-tinta-2);font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.p-saltar[open]>.p-pasos{margin:var(--coni-espacio-1) 0 var(--coni-espacio-3)}
/* el indicador de guardado: un punto en el color de su estado y el estado en texto */
.p-guardado{display:flex;align-items:center;gap:var(--coni-espacio-2);min-height:var(--coni-tactil);min-width:0;color:var(--coni-tinta-2);
  white-space:nowrap;font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui);
  font-variant-numeric:tabular-nums}
.p-guardado-linea{overflow:hidden;text-overflow:ellipsis;min-width:0}
.p-guardado-texto{min-width:0}
.p-guardado-punto{flex:none;width:8px;height:8px;border-radius:var(--coni-radio-pastilla);background:var(--coni-exito)}
.p-guardado[data-estado="guardando"] .p-guardado-punto{background:transparent;border:var(--coni-borde-ancho) solid var(--coni-tinta-2)}
.p-guardado[data-estado="sin-conexion"],.p-guardado[data-estado="conflicto"],.p-guardado[data-estado="sesion"]{color:var(--coni-aviso-texto)}
.p-guardado[data-estado="sin-conexion"] .p-guardado-punto,.p-guardado[data-estado="conflicto"] .p-guardado-punto,
.p-guardado[data-estado="sesion"] .p-guardado-punto{background:var(--coni-aviso)}
.p-guardado[data-estado="fallo"]{color:var(--coni-error-texto)}
.p-guardado[data-estado="fallo"] .p-guardado-punto{background:var(--coni-error)}
.p-guardado .btn.enlace{flex:none;min-height:var(--coni-tactil)}

/* ---- el paso: título de pantalla (Inter 700, .coni-titulo-pantalla) y su entradilla ---- */
.p-paso-cabecera{display:grid;gap:var(--coni-espacio-3);margin-bottom:var(--coni-espacio-12)}
.p-paso-cabecera .coni-titulo-pantalla{margin:0}
.preparar .entrada{max-width:var(--coni-ancho-lectura);color:var(--coni-tinta-2);text-wrap:pretty;
  font:var(--coni-peso-regular) var(--coni-texto-grande)/var(--coni-texto-grande-interlinea) var(--coni-fuente-ui)}
/* la bienvenida de la primera vez: habla Coni, con su avatar (32 px, positivo en claro y negativo en oscuro). Lo mismo en
   «Tu bóveda está lista» (.p-coni-dice, 20-10, cruce del 19-10 §5, tema 10) */
.p-primera-vez,.p-coni-dice{display:flex;align-items:flex-start;gap:var(--coni-espacio-3);max-width:var(--coni-ancho-lectura);margin:calc(-1 * var(--coni-espacio-6)) 0 var(--coni-espacio-12);
  color:var(--coni-tinta);font:var(--coni-peso-regular) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui)}
.p-primera-vez::before,.p-coni-dice::before{content:"";flex:none;width:var(--coni-avatar-chat);height:var(--coni-avatar-chat);
  background:url("/static/coni/marca/coni-avatar-circular-positivo.svg") center/contain no-repeat}
html[data-tema="oscuro"] .p-primera-vez::before,html[data-tema="oscuro"] .p-coni-dice::before{background-image:url("/static/coni/marca/coni-avatar-circular-negativo.svg")}
.p-recuperado{margin-bottom:var(--coni-espacio-8);max-width:var(--coni-columna)}

/* ---- la pregunta: Inter 28/500, −0,02 em (22/500 en el celular, al final). La raya de «sin guardar» existe siempre (transparente) y solo cambia de color: pasa al
   aviso (D2), junto con el texto de la ranura ---- */
.pregunta{position:relative;min-width:0;border:0;border-left:var(--coni-seleccion-ancho) solid transparent;
  margin:0 0 var(--coni-espacio-12) calc(-1 * var(--coni-espacio-4) - var(--coni-seleccion-ancho));padding:0 0 0 var(--coni-espacio-4);
  scroll-margin-top:calc(var(--coni-barra) + var(--coni-espacio-4));transition:border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
.pregunta.sin-guardar{border-left-color:var(--coni-aviso)}
.pregunta>legend,.pregunta-texto{display:block;float:left;width:100%;max-width:var(--coni-ancho-lectura);padding:0;margin:0 0 var(--coni-espacio-1);
  color:var(--coni-tinta);letter-spacing:-0.02em;text-wrap:pretty;
  font:var(--coni-peso-medio) var(--coni-texto-pregunta)/var(--coni-texto-pregunta-interlinea) var(--coni-fuente-ui)}
.pregunta>legend+*,.pregunta-texto+*{clear:left}
.pregunta-cuerpo{display:grid;gap:var(--coni-espacio-2);margin-top:var(--coni-espacio-3)}
.para-que,.opcional,.ejemplo{max-width:var(--coni-ancho-lectura);color:var(--coni-tinta-2);text-wrap:pretty;
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.ejemplo b{color:var(--coni-tinta-2);font-weight:var(--coni-peso-medio)}
.control{margin-top:var(--coni-espacio-2);min-width:0}

/* campos: los de coni.css (48 px, radio 14, borde D6); aquí solo el alto de los de varias líneas y el número corto */
.preparar textarea.chica{min-height:calc(2lh + 2 * var(--coni-espacio-3) + 2 * var(--coni-borde-ancho));field-sizing:content;max-height:60vh}
.preparar textarea.pegado{min-height:calc(6lh + 2 * var(--coni-espacio-3) + 2 * var(--coni-borde-ancho))}
.pregunta input.numero{max-width:12ch}

/* ---- una opción (el selector de Coni): la tarjeta entera es el objetivo (48 px o más), con su indicador de 20 px; nada
   preseleccionado. Elegida: borde de 2 px en mandarina (el relleno baja 1 px) e indicador con anillo de 6 px (única) o
   lleno con la marca de Lucide (varias). La entrada nativa sigue ahí (teclado, lector de pantalla): se dibuja ella.
   Más juntas desde el 20-10 (cruce del 19-10 §5, tema 6: el componente de siempre, con tokens): relleno de 12 arriba y
   abajo (una línea mide 50 px) y 8 px entre opciones; el aire entre preguntas (48, 40 en el celular) no cambia, así lo que
   va junto se lee junto ---- */
.elecciones{display:grid;gap:var(--coni-espacio-2)}
.eleccion{display:flex;gap:var(--coni-espacio-3);align-items:flex-start;min-height:var(--coni-alto-control);
  padding:var(--coni-espacio-3) var(--coni-espacio-5);border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-l);
  background:var(--coni-superficie);color:var(--coni-tinta);cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:var(--coni-peso-regular) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui);
  transition:border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
/* presionar (19-10, como .coni-opcion en coni.css): con el dedo apoyado, el borde pasa a tinta en --coni-dur-instante con la
   curva de entrada, sin escala ni fondo; al elegir, borde e indicador cambian de una vez (sin transición) */
.eleccion:active:not(.marcada):not(:has(input:disabled)){border-color:var(--coni-tinta);
  transition:border-color var(--coni-dur-instante) var(--coni-curva-entrada)}
.eleccion.marcada{border:var(--coni-seleccion-ancho) solid var(--coni-acento);transition:none;
  padding:calc(var(--coni-espacio-3) - var(--coni-borde-ancho)) calc(var(--coni-espacio-5) - var(--coni-borde-ancho))}
/* la selección se mueve sin redibujar (pintarMarcas, 20-10): durante un cuadro el grupo lleva data-eligiendo y ninguna
   opción hace transición, así la que se suelta y la nueva cambian juntas (antes la que se soltaba se apagaba en unos 115 ms
   y la nueva cambiaba de golpe; revisión del 19-10, hallazgo 24, como .coni-opcion en coni.css) */
.elecciones[data-eligiendo] .eleccion{transition:none}
@media (hover:hover){.eleccion:hover:not(.marcada):not(:has(input:disabled)){border-color:var(--coni-tinta)}}
.eleccion-marca{position:relative;flex:none;width:20px;height:20px;margin-top:2px}
.eleccion-marca input{appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;width:20px;height:20px;margin:0;
  border:var(--coni-seleccion-ancho) solid var(--coni-tinta-2);border-radius:var(--coni-radio-pastilla);background:var(--coni-superficie);cursor:pointer}
/* la casilla (varias respuestas) queda cuadrada con --coni-radio-xs (6 px). DESIGN.md no tiene un radio para casillas y
   reserva xs para la cola de la burbuja; los demás (10 o más) la vuelven un círculo de 20 px igual al indicador de una sola
   respuesta. Decisión del fundador del 01-10-2026 (PENDIENTES D12, fila 1): se queda cuadrada con 6 px; es una excepción
   documentada en diseno/rebranding-coni/criterios-fase-2.md (§2, D9), como la D6 de los bordes */
.eleccion-marca input[type=checkbox]{border-radius:var(--coni-radio-xs)}
/* una sola respuesta: anillo de 6 px y punto central en --coni-sobre-acento (19-10: el anillo solo daba 2,86:1 en claro;
   con el punto, 6,37:1). En oscuro el punto es del color del fondo y se ve como hoy (el anillo ya da 6,51:1) */
.eleccion-marca input[type=radio]:checked{border:6px solid var(--coni-acento);background:var(--coni-sobre-acento)}
.eleccion-marca input[type=checkbox]:checked{border-color:var(--coni-acento);background:var(--coni-acento)}
/* la marca de Lucide (check, trazo 2 llevado a 20 px), recortada sobre el color de texto que va encima de la mandarina */
.eleccion-marca:has(input[type=checkbox]:checked)::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--coni-sobre-acento);
  clip-path:path("M17.2558 5.5892L8.0892 14.7558A0.8333 0.8333 0 0 1 6.9108 14.7558L2.7442 10.5892A0.8333 0.8333 0 0 1 3.9225 9.4108L7.5 12.9883L16.0775 4.4108A0.8333 0.8333 0 0 1 17.2558 5.5892Z")}
.eleccion-marca input:focus-visible{outline:none}
.eleccion:has(input:focus-visible){outline:var(--coni-foco-ancho) solid var(--coni-acento-texto);outline-offset:var(--coni-foco-separacion)}
.eleccion-texto{min-width:0;overflow-wrap:anywhere}
.eleccion-titulo{display:block;font-weight:var(--coni-peso-semi)}
.eleccion-detalle{display:block;color:var(--coni-tinta-2);font-size:var(--coni-texto-chico);line-height:var(--coni-texto-chico-interlinea)}
/* un grupo de opciones con error (el rol sin elegir): las tarjetas llevan el borde de error, como un campo; el mensaje dice qué hacer */
.con-error .eleccion:not(.marcada){border-color:var(--coni-error)}
.otra-campo{display:grid;gap:var(--coni-espacio-2);padding:var(--coni-espacio-1) 0 0 calc(var(--coni-espacio-5) + 20px + var(--coni-espacio-3))}
/* el aviso de una opción: informativo, en una nota azul (sin raya de adorno) */
.aviso-opcion{max-width:var(--coni-ancho-lectura);padding:var(--coni-espacio-3) var(--coni-espacio-4);border-radius:var(--coni-radio-l);
  background:var(--coni-info-fondo);color:var(--coni-tinta);font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}

/* sub-campos (grupos y listas) */
.sub-campos{display:grid;gap:var(--coni-espacio-5)}
.campo-sub{display:grid;gap:var(--coni-espacio-2);min-width:0;border:0;margin:0;padding:0}
.campo-sub>label:not(.eleccion),.campo-sub>legend{padding:0;margin-bottom:var(--coni-espacio-1);color:var(--coni-tinta);
  font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.lista-items{display:grid;gap:var(--coni-espacio-6)}
.item{display:grid;gap:var(--coni-espacio-3);min-width:0;border:0;border-left:var(--coni-borde-ancho) solid var(--coni-borde);margin:0;padding:0 0 0 var(--coni-espacio-4)}
.item>legend{padding:0;margin-bottom:var(--coni-espacio-1);color:var(--coni-tinta-2);
  font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
/* «Quitar», fantasma chico pegado al borde derecho: la caja sale hacia el margen lo que miden su relleno y su borde (16 + 1),
   así la palabra termina en la línea del contenido (20-10; en el celular, más abajo) */
.item-quitar{justify-self:end;margin-right:calc(-1 * (var(--coni-espacio-4) + var(--coni-borde-ancho)))}
.lista-textos{display:grid;gap:var(--coni-espacio-2)}
.agregar{justify-self:start;margin-top:var(--coni-espacio-3)}
.ninguna-fila{margin-top:var(--coni-espacio-2)}

/* ---- «¿No tienes esta respuesta?»: plegado (chevron de coni.css), con las mismas tarjetas, más compactas ---- */
.sin-respuesta{margin-top:0}
.sin-respuesta>summary{min-height:var(--coni-tactil);color:var(--coni-tinta-2);
  font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.sin-respuesta .elecciones{margin-top:var(--coni-espacio-1);gap:var(--coni-espacio-2)}
.sin-respuesta .eleccion{min-height:var(--coni-tactil);padding:var(--coni-espacio-2) var(--coni-espacio-4);
  font-size:var(--coni-texto-chico);line-height:var(--coni-texto-chico-interlinea)}
.sin-respuesta .eleccion.marcada{padding:calc(var(--coni-espacio-2) - var(--coni-borde-ancho)) calc(var(--coni-espacio-4) - var(--coni-borde-ancho))}
.sin-respuesta .eleccion-marca{margin-top:0}

/* la ranura de ayuda: contador, aviso, nota o «no se guardó», una sola por pregunta. Vacía no ocupa lugar. Pendiente en el
   amarillo de aviso (D2); un error, en el rojo, con lo que hay que hacer */
.ayuda-linea{margin-top:var(--coni-espacio-1);max-width:var(--coni-ancho-lectura);color:var(--coni-tinta-2);
  text-wrap:pretty;font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui);
  font-variant-numeric:tabular-nums}
.ayuda-linea:empty{display:none}
.pregunta-cuerpo>div:empty{display:none}
.ayuda-linea.pend{color:var(--coni-aviso-texto)}
.ayuda-linea.error{color:var(--coni-error-texto);font-weight:var(--coni-peso-medio)}
.ayuda-linea .btn.enlace{display:inline;min-height:0;padding:0 var(--coni-espacio-1);text-decoration:underline;text-underline-offset:var(--coni-espacio-1)}

/* lo anotado en una entrevista que nadie de la marca confirmó (10.3c): una tarjeta chica junto al campo, con «Confirmar» para
   cualquiera de los dos, dueño o community manager (20-10) */
.propuesta-linea{display:flex;flex-wrap:wrap;align-items:center;gap:var(--coni-espacio-2) var(--coni-espacio-3);max-width:var(--coni-columna);
  margin-top:var(--coni-espacio-2);padding:var(--coni-espacio-3) var(--coni-espacio-4);background:var(--coni-superficie);
  border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-l);color:var(--coni-tinta);
  font:var(--coni-peso-regular) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui)}
.propuesta-linea>span:first-child{flex:1 1 16rem;min-width:0;overflow-wrap:anywhere}
.propuesta-linea .suave-texto{flex-basis:100%;font-size:var(--coni-texto-chico)}
/* un conflicto: un pendiente (D2): las dos versiones, en el amarillo de aviso, con texto que dice qué hacer */
.conflicto{display:grid;gap:var(--coni-espacio-2);max-width:var(--coni-columna);margin-top:var(--coni-espacio-3);padding:var(--coni-espacio-4) var(--coni-espacio-5);
  background:var(--coni-aviso-fondo);border-radius:var(--coni-radio-l);color:var(--coni-tinta);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.conflicto .guardada{color:var(--coni-tinta);overflow-wrap:anywhere}
.conflicto .fila{gap:var(--coni-espacio-2);margin-top:var(--coni-espacio-1)}

/* ---- texto pegado, plegado al final del paso 1 ---- */
.pegado-plegable{margin:0;padding:var(--coni-espacio-3) 0 0;border-top:var(--coni-borde-ancho) solid var(--coni-borde)}
.pegado-plegable>summary{min-height:var(--coni-tactil);white-space:normal;color:var(--coni-tinta)}
.pegado-plegable[open]>summary{margin-bottom:var(--coni-espacio-3)}
.pegado-plegable .pregunta{margin-bottom:var(--coni-espacio-3)}

/* ---- fin del paso: lo que falta, el guardado dicho en una frase y las dos acciones («Volver», fantasma; «Seguir», la única
   principal) ---- */
.p-fin-paso{display:grid;gap:var(--coni-espacio-3);margin-top:var(--coni-espacio-12);padding-top:var(--coni-espacio-6);
  border-top:var(--coni-borde-ancho) solid var(--coni-borde)}
.p-faltan-paso{max-width:var(--coni-ancho-lectura);color:var(--coni-tinta);text-wrap:pretty;
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.p-faltan-paso:empty{display:none}
.p-faltan-listo{color:var(--coni-tinta-2)}
.p-guardado-largo{min-height:1.5em;max-width:var(--coni-ancho-lectura);color:var(--coni-tinta-2);text-wrap:pretty;
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.p-guardado-largo.pend{color:var(--coni-aviso-texto)}
.p-guardado-largo.error{color:var(--coni-error-texto)}
.p-guardado-largo .btn.enlace{display:inline-block;min-height:var(--coni-objetivo-min);padding:0 var(--coni-espacio-1);
  line-height:var(--coni-objetivo-min);vertical-align:baseline;text-decoration:underline;text-underline-offset:var(--coni-espacio-1)}
/* el orden de las acciones (D12, fila 12; 20-10): en el par «Volver» / «Seguir» (.par-volver: los pasos y «Volver al paso
   5» de la revisión), «Volver» a la izquierda y el avance a la derecha, como un asistente de pasos. Cuando la principal va
   sola («Seguir» en el paso 1) o con una alternativa que no es volver («Empezar mi primer video» y «Revisar tu bóveda»,
   «Usar lo nuevo en mis videos» y «Revisar tu bóveda»), va primero: a la izquierda, y primera también en el HTML (en el
   celular queda arriba y el teclado la encuentra primero), como «Empezar mi guion» en la app */
.p-fin-paso .acciones{margin-top:var(--coni-espacio-2)}
.p-fin-paso .acciones.par-volver{justify-content:space-between}
.p-fin-paso .acciones.par-volver .btn.primario{margin-left:auto}
/* «Volver» y «Volver al paso 5», fantasmas grandes al borde de la columna: la caja sale hacia el margen lo que miden su
   relleno (24, el de DESIGN.md §4, sin cambiarlo) y su borde (1), así la palabra queda en la línea del contenido (20-10,
   cruce del 19-10 §5, tema 1). En el celular, más abajo */
.p-fin-paso .acciones>.btn.suave:first-child{margin-left:calc(-1 * (var(--coni-espacio-6) + var(--coni-borde-ancho)))}
.p-lista-faltan{display:grid;gap:var(--coni-espacio-1);margin:var(--coni-espacio-2) 0 0;padding-left:var(--coni-espacio-5)}
.p-lista-faltan a{display:inline-flex;align-items:center;min-height:var(--coni-tactil)}
.p-faltan-paso .p-lista-faltan{margin-top:var(--coni-espacio-1)}
.p-faltan-paso .btn.enlace{display:inline-flex;justify-content:flex-start;min-height:var(--coni-tactil);
  padding:var(--coni-espacio-1) 0;text-align:left;text-decoration:underline;text-underline-offset:var(--coni-espacio-1)}

/* ---- acceso (crear la cuenta, entrar, contraseña nueva, unirse, «Tu marca en Hey Coni», «Tus marcas»): una acción por
   pantalla; el título de pantalla, la entradilla y el formulario a 440 px ---- */
.p-acceso{display:grid;gap:var(--coni-espacio-4);max-width:var(--coni-columna)}
.p-acceso>.coni-titulo-pantalla{margin:0}
.p-acceso>.entrada{margin-bottom:var(--coni-espacio-6)}
.p-acceso>h2{color:var(--coni-tinta);font:var(--coni-peso-semi) var(--coni-texto-titulo)/var(--coni-texto-titulo-interlinea) var(--coni-fuente-ui)}
.p-acceso>.p-form,.p-acceso>.p-enlaces,.p-acceso>.p-consecuencia{max-width:var(--coni-acceso-formulario)}
.p-acceso>.coni-titulo-pantalla+.p-form,.p-acceso>.coni-titulo-pantalla+.p-empresas{margin-top:var(--coni-espacio-6)}
/* lo que pasó, cuando una pantalla no se pudo abrir: pegado al título, como una entradilla, en tinta */
.p-acceso>p[role=alert]{max-width:var(--coni-ancho-lectura);margin-bottom:var(--coni-espacio-4);color:var(--coni-tinta);text-wrap:pretty;
  font:var(--coni-peso-regular) var(--coni-texto-grande)/var(--coni-texto-grande-interlinea) var(--coni-fuente-ui)}
.p-form{display:grid;gap:var(--coni-espacio-5);max-width:var(--coni-acceso-formulario)}
.p-campo{display:grid;gap:var(--coni-espacio-2);min-width:0;border:0;margin:0;padding:0}
.p-campo>label,.p-campo>legend{padding:0;color:var(--coni-tinta);
  font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.p-campo>legend{margin-bottom:var(--coni-espacio-2)}
.p-campo .ayuda-linea{margin-top:0}
/* «Mostrar contraseña»: fantasma chico con el ojo de Lucide (20 px, currentColor; tachado cuando la contraseña se ve) y el
   texto que cambia entre «Mostrar» y «Ocultar» (una sola señal, sin aria-pressed: 20-10). La caja sale hacia el margen lo
   que miden su relleno y su borde: el ojo queda en la línea del campo */
.p-mostrar{justify-self:start;margin-left:calc(-1 * (var(--coni-espacio-4) + var(--coni-borde-ancho)))}
.p-mostrar .icono{flex:none}
.p-form .acciones{margin-top:var(--coni-espacio-2)}
.p-general:empty{display:none}
.p-general .aviso{margin:0}
.p-enlaces{display:grid;gap:0;margin-top:var(--coni-espacio-4);color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.p-enlaces a{display:inline-flex;align-items:center;min-height:var(--coni-tactil)}
.p-consecuencia{color:var(--coni-tinta-2);font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
/* «Tus marcas»: una tarjeta chica por marca (el enlace entero), con su rol, su estado (un punto del color del estado y el
   estado en texto) y lo que hace, como un botón chico; debajo, las otras dos entradas como botones fantasma */
.p-empresas{list-style:none;margin:0;padding:0;display:grid;gap:var(--coni-espacio-4);max-width:var(--coni-columna)}
.p-empresas>li{display:grid;gap:var(--coni-espacio-1)}
.p-empresa{display:grid;justify-items:start;gap:var(--coni-espacio-1);min-height:var(--coni-tactil);padding:var(--coni-espacio-5) var(--coni-espacio-6);
  background:var(--coni-superficie);border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-l);
  color:var(--coni-tinta);text-decoration:none;transition:border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
@media (hover:hover){.p-empresa:hover{border-color:var(--coni-tinta)}}
.p-empresa b{font:var(--coni-peso-semi) var(--coni-texto-titulo)/var(--coni-texto-titulo-interlinea) var(--coni-fuente-ui)}
.p-empresa-rol{color:var(--coni-tinta-2);font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.p-empresa-estado{display:inline-flex;align-items:baseline;gap:var(--coni-espacio-2);color:var(--coni-tinta);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.p-empresa-estado::before{content:"";flex:none;width:8px;height:8px;border-radius:var(--coni-radio-pastilla);background:var(--coni-tinta-2)}
.p-empresa-estado[data-estado="en-uso"]::before,.p-empresa-estado[data-estado="lista"]::before{background:var(--coni-exito)}
.p-empresa-estado[data-estado="faltan"]::before{background:var(--coni-aviso)}
.p-empresa-estado[data-estado="revisar"]{color:var(--coni-aviso-texto)}
.p-empresa-estado[data-estado="revisar"]::before{background:var(--coni-aviso)}
.p-empresa-accion{display:inline-flex;align-items:center;min-height:var(--coni-alto-control-chico);margin-top:var(--coni-espacio-3);padding:0 var(--coni-espacio-4);
  border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-pastilla);color:var(--coni-tinta);
  font:var(--coni-peso-medio) var(--coni-texto-chico)/1 var(--coni-fuente-ui);transition:border-color var(--coni-dur-rapida) var(--coni-curva-suave)}
@media (hover:hover){.p-empresa:hover .p-empresa-accion{border-color:var(--coni-tinta)}}
.p-empresa-enlaces{display:flex;flex-wrap:wrap;gap:0 var(--coni-espacio-1)}
.p-empresa-corregir{display:inline-flex;align-items:center;min-height:var(--coni-tactil);padding:0 var(--coni-espacio-4);border-radius:var(--coni-radio-pastilla);
  color:var(--coni-tinta);text-decoration:none;font:var(--coni-peso-medio) var(--coni-texto-chico)/1 var(--coni-fuente-ui);
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave)}
@media (hover:hover){.p-empresa-corregir:hover{background:var(--coni-superficie)}}

/* ---- «Tu marca hasta ahora»: desde 1024 px, una columna a la derecha (una tarjeta: superficie, borde de 1 px, radio 28,
   sin sombra); por debajo, un acceso fijo abajo que abre la misma lista en una hoja (<dialog>). Sin sombras ni velo
   transparente: detrás de la hoja, el fondo de la app, entero. Ninguna fila se realza al cambiar ---- */
.p-resumen{display:none}
@media (min-width:1024px){
  .p-marco.con-resumen{display:grid;grid-template-columns:minmax(0,var(--coni-columna)) var(--coni-espacio-12) var(--coni-resumen);justify-content:start}
  .p-marco.con-resumen .p-columna{grid-column:1}
  .p-marco.con-resumen .p-indice,.p-marco.con-resumen.con-indice .p-indice:not([hidden]){display:none}
  .p-resumen .r-estado{display:none}              /* la línea de arriba ya dice cuántas faltan: aquí no se repite */
  /* 20-10 (cruce del 19-10 §5, tema 4): la tarjeta tiene el alto de la ventana como máximo; el título queda fijo y se
     desplaza solo el cuerpo. preparar.js (ajustarResumen) lo termina justo debajo de la última fila que cabe entera, así
     ninguna línea queda cortada a la mitad, y abajo «Ver N respuestas más» dice que hay más (sin degradados: una raya de
     1 px y el texto). El cuerpo sale 16 px hacia los lados (dentro del relleno de la tarjeta) para que el fondo de una
     fila al pasar el ratón y su anillo de foco no se recorten */
  .p-marco.con-resumen .p-resumen:not([hidden]){display:flex;flex-direction:column;grid-column:3;position:sticky;top:calc(var(--coni-barra) + var(--coni-espacio-12));
    align-self:start;max-height:calc(100vh - var(--coni-barra) - var(--coni-espacio-16));
    max-height:calc(100dvh - var(--coni-barra) - var(--coni-espacio-16));overflow:hidden}
  .p-marco.con-resumen .p-resumen-cuerpo{flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
    margin:0 calc(-1 * var(--coni-espacio-4));padding:0 var(--coni-espacio-4) var(--coni-espacio-1);scroll-padding-block:var(--coni-espacio-1)}
  /* 22-10 (revisión del 20-10): la raya de arriba va en el título fijo, no en el cuerpo que se desplaza. Antes, al bajar el
     cuerpo a mano, el texto pasaba pegado bajo «Tu marca hasta ahora», sin raya; ahora lo que se desplaza siempre pasa bajo
     una raya fija, como la de «Ver N respuestas más» abajo. El primer paso del cuerpo no lleva la suya (serían dos) */
  .p-marco.con-resumen .p-resumen>h2{padding-bottom:var(--coni-espacio-2);border-bottom:var(--coni-borde-ancho) solid var(--coni-borde)}
  .p-marco.con-resumen .p-resumen-cuerpo>.r-paso:first-of-type{margin-top:var(--coni-espacio-2);padding-top:0;border-top:0}
}
.p-resumen-mas{flex:none;display:flex;align-items:center;gap:var(--coni-espacio-1);width:100%;min-height:var(--coni-tactil);
  margin:0;padding:var(--coni-espacio-2) 0 0;border:0;border-top:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:0;
  background:transparent;color:var(--coni-tinta);text-align:left;cursor:pointer;
  font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
/* el chevron de Lucide hacia abajo (el mismo contorno de los plegables de coni.css), 20 px, currentColor */
.p-resumen-mas::after{content:"";flex:none;width:20px;height:20px;background:currentColor;
  clip-path:path("M5.5893 6.9107L10 11.3215L14.4107 6.9107A0.8333 0.8333 0 0 1 15.5893 8.0893L10.5893 13.0893A0.8333 0.8333 0 0 1 9.4107 13.0893L4.4107 8.0893A0.8333 0.8333 0 0 1 5.5893 6.9107Z")}
.p-resumen-mas[data-hacia="arriba"]::after{
  clip-path:path("M5.5893 13.0893L10 8.6785L14.4107 13.0893A0.8333 0.8333 0 0 0 15.5893 11.9107L10.5893 6.9107A0.8333 0.8333 0 0 0 9.4107 6.9107L4.4107 11.9107A0.8333 0.8333 0 0 0 5.5893 13.0893Z")}
@media (hover:hover){.p-resumen-mas:hover{text-decoration:underline;text-underline-offset:var(--coni-espacio-1)}}
@media (min-width:1280px){
  .p-marco.con-resumen.con-indice{grid-template-columns:var(--coni-pasos) var(--coni-espacio-24) minmax(0,var(--coni-columna)) var(--coni-espacio-12) var(--coni-resumen);
    padding-left:var(--coni-espacio-10)}
  .p-marco.con-resumen.con-indice .p-indice:not([hidden]){display:block;grid-column:1;position:sticky;top:calc(var(--coni-barra) + var(--coni-espacio-12));align-self:start}
  .p-marco.con-resumen.con-indice .p-columna{grid-column:3}
  .p-marco.con-resumen.con-indice .p-resumen:not([hidden]){grid-column:5}
  /* un solo mapa: con los pasos a la izquierda, la columna no repite el estado de cada paso */
  .p-marco.con-resumen.con-indice .p-resumen .r-paso-estado{display:none}
}
/* con «Tu marca hasta ahora» (columna o hoja), sus títulos de paso llevan a cada paso: «Ir a otro paso» sobra */
.p-marco.con-resumen .p-saltar{display:none}
.p-resumen{background:var(--coni-superficie);border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-xl);
  padding:var(--coni-espacio-6);view-transition-name:p-resumen}
.p-resumen>h2,.p-marca-hoja-cabecera h2{margin:0;color:var(--coni-tinta);
  font:var(--coni-peso-semi) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui)}
.r-estado{margin-top:var(--coni-espacio-1);color:var(--coni-tinta-2);font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.r-estado.pend{color:var(--coni-aviso-texto)}
.r-vacio{margin-top:var(--coni-espacio-2);color:var(--coni-tinta-2);font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.r-paso{margin-top:var(--coni-espacio-4);padding-top:var(--coni-espacio-2);border-top:var(--coni-borde-ancho) solid var(--coni-borde)}
.r-paso>h3{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--coni-espacio-2);margin:0;
  font:var(--coni-peso-semi) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.r-paso-estado{color:var(--coni-tinta-2);font-weight:var(--coni-peso-regular)}
.r-paso-estado.pend{color:var(--coni-aviso-texto)}
.r-paso-ir{display:inline-flex;align-items:center;min-height:var(--coni-tactil);color:var(--coni-tinta);text-decoration:none}
.r-paso-ir[aria-current="step"]{text-decoration:underline;text-decoration-thickness:var(--coni-borde-ancho);text-underline-offset:var(--coni-espacio-1)}
@media (hover:hover){.r-paso-ir:hover{text-decoration:underline;text-underline-offset:var(--coni-espacio-1)}}
.r-filas{list-style:none;margin:var(--coni-espacio-1) 0 0;padding:0;display:grid;gap:var(--coni-espacio-1)}
/* cada fila es un solo botón de 44 px: «Corregir «…»» lleva a la pregunta */
.r-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--coni-espacio-2);align-items:start;min-height:var(--coni-tactil);
  width:calc(100% + 2 * var(--coni-espacio-2));margin:0 calc(-1 * var(--coni-espacio-2));padding:var(--coni-espacio-2);border:0;
  border-radius:var(--coni-radio-m);background:transparent;color:var(--coni-tinta);text-align:left;cursor:pointer;
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui);
  transition:background-color var(--coni-dur-rapida) var(--coni-curva-suave)}
@media (hover:hover){.r-fila:hover{background:var(--coni-fondo)}}
.r-etq{grid-column:1;color:var(--coni-tinta-2)}
.r-valor{grid-column:1;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.r-valor.pend,.r-nota.pend{color:var(--coni-aviso-texto)}
.r-nota{grid-column:1;color:var(--coni-tinta-2)}
.r-accion{grid-column:2;grid-row:1;color:var(--coni-tinta);font-weight:var(--coni-peso-medio);white-space:nowrap}

/* acceso compacto y hoja (celular y tableta) */
.p-marca-acceso{display:none}
@media (max-width:1023px){
  /* verificación del cierre (01-10): como tarjeta blanca de radio 20 se leía como una opción más y tapaba el borde de la
     elegida. Es una barra de la interfaz pegada abajo: ancho completo, sin radio, el fondo de la app y un borde arriba */
  .p-marca-acceso:not([hidden]){position:fixed;left:0;right:0;bottom:0;
    z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--coni-espacio-3);
    min-height:calc(var(--coni-alto-control) + env(safe-area-inset-bottom));width:100%;margin:0;
    padding:var(--coni-espacio-2) max(var(--coni-espacio-4),env(safe-area-inset-right,0px)) calc(var(--coni-espacio-2) + env(safe-area-inset-bottom))
      max(var(--coni-espacio-4),env(safe-area-inset-left,0px));
    background:var(--coni-fondo);color:var(--coni-tinta);
    border:0;border-top:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:0;box-shadow:none;text-align:left;cursor:pointer;
    font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
  /* pegada a los bordes: el anillo de foco va por dentro, para que no quede fuera de la pantalla */
  .p-marca-acceso:focus-visible{outline-offset:calc(-1 * (var(--coni-foco-ancho) + var(--coni-foco-separacion)))}
  .p-marca-acceso.teclado:not([hidden]){display:none}
  /* con la línea del paso (20-10) el acceso mide 58 px (dos líneas) más la franja de abajo del iPhone, en todos los anchos:
     bajo 430 px el estado va en corto para que no pase a tres (78 px; 22-10 y 23-10, más abajo). Lo que se enfoca y «Seguir» siguen
     quedando por encima */
  html.con-acceso .p-marco{padding-bottom:calc(var(--coni-alto-control) + var(--coni-espacio-3) + var(--coni-espacio-12) + env(safe-area-inset-bottom))}
  html.con-acceso{scroll-padding-bottom:calc(var(--coni-alto-control) + var(--coni-espacio-3) + var(--coni-espacio-6) + env(safe-area-inset-bottom))}
}
@media (max-width:1023px) and (max-height:480px){
  /* con poco alto deja de ser fija: queda en la página como una tarjeta chica, al final */
  .p-marca-acceso:not([hidden]){position:static;display:flex;width:calc(100% - 2 * var(--coni-espacio-4));margin:0 var(--coni-espacio-4) var(--coni-espacio-8);
    padding:var(--coni-espacio-2) var(--coni-espacio-5);background:var(--coni-superficie);border:var(--coni-borde-ancho) solid var(--coni-borde);
    border-radius:var(--coni-radio-l)}
  .p-marca-acceso:focus-visible{outline-offset:var(--coni-foco-separacion)}
  html.con-acceso .p-marco{padding-bottom:var(--coni-espacio-6)}
  html.con-acceso{scroll-padding-bottom:0}
}
@media (hover:hover) and (max-width:1023px){.p-marca-acceso:not([hidden]):hover{border-top-color:var(--coni-tinta)}}
/* dónde estás (20-10, cruce del 19-10 §5, tema 8): «PASO 2 DE 5 · Tu cliente» en su propia línea, arriba de «Tu marca hasta
   ahora» y de lo que falta, con la misma forma que la línea de arriba de la columna (el paso en 12/600 en mayúsculas y el
   nombre en 14). Un nombre largo se corta al final, nunca el paso. Desde el 22-10 también es parte del nombre del botón (sin
   aria-hidden): el nombre empieza por lo que se ve primero, y quien usa el control por voz lo encuentra (WCAG 2.5.3); el
   lector oye el paso dos veces (el título y el botón), y se acepta */
.p-marca-acceso-paso{flex:1 1 100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.p-marca-acceso-paso:empty{display:none}
.p-marca-acceso-donde{text-transform:uppercase;letter-spacing:var(--coni-etiqueta-tracking);
  font:var(--coni-peso-semi) var(--coni-texto-etiqueta)/var(--coni-texto-etiqueta-interlinea) var(--coni-fuente-ui)}
.p-marca-acceso-estado,.p-marca-acceso-corto{color:var(--coni-tinta-2);font-weight:var(--coni-peso-regular)}
.p-marca-acceso-estado.pend,.p-marca-acceso-corto.pend{color:var(--coni-aviso-texto)}
/* bajo 430 px (22-10, revisión del 20-10): el estado corto («Faltan 13», «Falta 1», «Lista») en la fila de «Tu marca hasta
   ahora (N)», así el acceso queda en dos líneas (58 px) como desde 430; el largo queda solo para el lector de pantalla (el
   mismo recorte de .visualmente-oculto), dentro del nombre del botón, y el corto no se lee (aria-hidden). Con la letra
   anterior bastaba bajo 390; Inter (23-10-2026) es más ancha: «Tu marca hasta ahora (13)» y «Faltan 13 para tu primer
   video» miden 381 px y a 390 (358 de ancho útil) la barra pasaba a tres líneas */
.p-marca-acceso-corto{display:none}
@media (max-width:429px){
  .p-marca-acceso-estado{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .p-marca-acceso-corto:not(:empty){display:inline}
}
/* verificación del cierre (01-10): a 85 % del alto, con el fondo opaco detrás, quedaba arriba una franja vacía que parecía
   una pantalla rota. La hoja ocupa ahora el alto completo, sin radio, con su cabecera y «Cerrar» arriba (y Escape) */
.p-marca-hoja{position:fixed;inset:0;display:none;flex-direction:column;width:100%;max-width:none;height:100vh;height:100dvh;
  max-height:none;margin:0;padding:env(safe-area-inset-top) 0 0;border:0;border-radius:0;
  background:var(--coni-superficie);color:var(--coni-tinta);box-shadow:none}
.p-marca-hoja[open]{display:flex}
/* sin velo transparente: detrás de la hoja, el fondo de la app, entero */
.p-marca-hoja::backdrop{background:var(--coni-fondo)}
.p-marca-hoja-cabecera{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--coni-espacio-3);min-height:var(--coni-barra);
  padding:var(--coni-espacio-2) var(--coni-espacio-2) var(--coni-espacio-2) var(--coni-espacio-6);border-bottom:var(--coni-borde-ancho) solid var(--coni-borde)}
.p-marca-hoja-cabecera .btn.suave{min-height:var(--coni-tactil);padding:0 var(--coni-espacio-4);font-size:var(--coni-texto-chico)}
.p-marca-hoja-cuerpo{overflow:auto;overscroll-behavior:contain;padding:var(--coni-espacio-2) var(--coni-espacio-6) calc(var(--coni-espacio-6) + env(safe-area-inset-bottom))}
.p-marca-hoja-cuerpo .r-paso:first-of-type{margin-top:var(--coni-espacio-2)}
/* sin <dialog> (navegadores antiguos): el resumen se ve al final de la página, debajo del paso */
@media (max-width:1023px){.sin-hoja .p-marco.con-resumen .p-resumen:not([hidden]){display:block;margin:var(--coni-espacio-8) 0 0;max-width:var(--coni-columna)}}

/* ---- «Seguías en…», arriba del paso: una tarjeta chica que entra con el paso y no cambia mientras se responde ---- */
.p-seguias{display:grid;gap:var(--coni-espacio-3);max-width:var(--coni-columna);margin:calc(-1 * var(--coni-espacio-6)) 0 var(--coni-espacio-12);
  padding:var(--coni-espacio-4) var(--coni-espacio-5);background:var(--coni-superficie);border:var(--coni-borde-ancho) solid var(--coni-borde);
  border-radius:var(--coni-radio-l)}
.p-seguias p{text-wrap:pretty}
.p-seguias b{font-weight:var(--coni-peso-semi)}
.p-seguias .fila{gap:var(--coni-espacio-2) var(--coni-espacio-4)}
.p-seguias-antes{color:var(--coni-tinta-2);font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}

/* ---- revisión, invitación al dueño y bóveda lista ---- */
/* el estado: una tarjeta; lo que falta para el primer video es un pendiente (D2), en el amarillo de aviso y con texto */
.rv-estado{display:grid;gap:var(--coni-espacio-2);max-width:var(--coni-columna);margin:0 0 var(--coni-espacio-12);padding:var(--coni-espacio-6);
  background:var(--coni-superficie);border:var(--coni-borde-ancho) solid var(--coni-borde);border-radius:var(--coni-radio-xl)}
.rv-estado.pend{background:var(--coni-aviso-fondo);border-color:var(--coni-aviso-fondo)}
.rv-estado b{font-weight:var(--coni-peso-semi)}
.rv-estado.pend b{color:var(--coni-aviso-texto)}
/* F12 (20-10): «Usar esta bóveda en mis videos» arriba, fuera de la tarjeta y secundario (la principal es la de abajo); a
   24 px de la tarjeta (su margen de 48 más estos −24) */
.rv-usar-arriba{margin:calc(-1 * var(--coni-espacio-6)) 0 var(--coni-espacio-12)}
/* F11 (20-10, cruce del 19-10 §5, tema 9): lo que falta, en una sola lista justo debajo de la tarjeta; cada fila es el
   nombre de la pregunta (en tinta, como en «Mejorar mi marca») y «Responder». Sin «Cómo se usa» en la fila: lo dice la
   pregunta al abrirla */
.rv-grupo.rv-faltan{margin-top:0}
.rv-falta .rv-etq{color:var(--coni-tinta);font:var(--coni-peso-medio) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui)}
.rv-falta>.rv-uso{display:none}
.rv-grupo{margin-top:var(--coni-espacio-16)}
/* F12 (20-10, cruce del 19-10 §5, tema 2; la propuesta de Astra): los cinco pasos, uno por fila, con su nombre, «Revisar» y
   un resumen breve (14 en tinta-2, dos líneas como mucho); abierto, el resumen se oculta y las respuestas van debajo, 16 px
   hacia adentro (sin raya lateral: esa queda para la pregunta sin guardar y los ítems de una lista) */
.rv-temas{list-style:none;margin:var(--coni-espacio-2) 0 0;padding:0}
.rv-tema{display:grid;gap:var(--coni-espacio-1);min-width:0;padding:var(--coni-espacio-4) 0;border-top:var(--coni-borde-ancho) solid var(--coni-borde)}
.rv-tema:first-child{border-top:0;padding-top:var(--coni-espacio-2)}
.rv-tema h4{margin:0;color:var(--coni-tinta);font:var(--coni-peso-semi) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui)}
.rv-tema-resumen{max-width:var(--coni-ancho-lectura);color:var(--coni-tinta-2);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.rv-tema-nota{color:var(--coni-aviso-texto);font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.rv-tema.abierto>.rv-tema-resumen{display:none}
.rv-tema-cuerpo{margin-top:var(--coni-espacio-1);padding-left:var(--coni-espacio-4)}
.rv-tema-cuerpo>.rv-plegar{margin-top:var(--coni-espacio-1)}
.rv-tema-cuerpo.sin-uso .rv-uso{display:none}
.rv-grupo>h3{margin:0 0 var(--coni-espacio-2);color:var(--coni-tinta);
  font:var(--coni-peso-semi) var(--coni-texto-titulo)/var(--coni-texto-titulo-interlinea) var(--coni-fuente-ui)}
.rv-grupo>.entrada{margin-bottom:var(--coni-espacio-4);font-size:var(--coni-texto-base);line-height:var(--coni-texto-base-interlinea)}
/* el tema dentro de un grupo, como las etiquetas del guion: 12/600 en mayúsculas, tinta-2 */
.rv-paso>h4{margin:var(--coni-espacio-8) 0 var(--coni-espacio-1);color:var(--coni-tinta-2);text-transform:uppercase;letter-spacing:var(--coni-etiqueta-tracking);
  font:var(--coni-peso-semi) var(--coni-texto-etiqueta)/var(--coni-texto-etiqueta-interlinea) var(--coni-fuente-ui)}
.rv-lista{list-style:none;margin:0;padding:0}
.rv-item{display:grid;gap:var(--coni-espacio-1);min-width:0;padding:var(--coni-espacio-4) 0;border-top:var(--coni-borde-ancho) solid var(--coni-borde)}
.rv-item:first-child{border-top:0}
.rv-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--coni-espacio-3);min-width:0}
.rv-etq{color:var(--coni-tinta-2);font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.rv-cabeza .btn{flex:none;margin-right:calc(-1 * var(--coni-espacio-4))}
.rv-valor{color:var(--coni-tinta);overflow-wrap:anywhere;white-space:pre-line}
.rv-valor.pend{color:var(--coni-aviso-texto)}
.rv-valor.sin{color:var(--coni-tinta-2)}
.rv-uso,.rv-quien,.rv-motivo,.rv-cita{max-width:var(--coni-ancho-lectura);color:var(--coni-tinta-2);overflow-wrap:anywhere;
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.rv-item>.fila{margin-top:var(--coni-espacio-1)}
.rv-editor{margin-top:var(--coni-espacio-3)}
.rv-editor .pregunta{margin-bottom:var(--coni-espacio-4)}
/* dentro de una fila abierta, la pregunta no pesa más que el nombre de la fila */
.rv-editor .pregunta>legend,.rv-editor .pregunta-texto{letter-spacing:normal;
  font:var(--coni-peso-medio) var(--coni-texto-grande)/var(--coni-texto-grande-interlinea) var(--coni-fuente-ui)}
.rv-nota-confirmacion{max-width:var(--coni-ancho-lectura);margin-top:var(--coni-espacio-12);color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.rv-usar{display:grid;gap:var(--coni-espacio-2)}
.rv-usar-motivo{max-width:var(--coni-ancho-lectura);color:var(--coni-tinta-2);text-wrap:pretty;
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.rv-usar-motivo:empty{display:none}
.rv-usar-motivo.pend{color:var(--coni-aviso-texto)}
.rv-mensaje{display:grid;gap:var(--coni-espacio-3);max-width:var(--coni-columna);margin-top:var(--coni-espacio-3)}
.rv-mensaje .btn{justify-self:start}
.rv-mensaje textarea{min-height:calc(4lh + 2 * var(--coni-espacio-3) + 2 * var(--coni-borde-ancho))}
/* «Tu bóveda está lista»: el título, Coni que habla, las acciones (antes de lo que informa, 20-10) y lo demás */
.p-lista-version{color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui);font-variant-numeric:tabular-nums}
.p-lista .p-coni-dice{margin-bottom:var(--coni-espacio-8)}
.p-lista-cambios{margin:0 0 var(--coni-espacio-6)}
/* en demo, la aclaración va antes de los botones (22-10): quien toca «Empezar mi primer video» ya sabe qué va a ver */
.p-lista-demo{max-width:var(--coni-ancho-lectura);margin:0 0 var(--coni-espacio-6)}
.p-lista-fin{margin:0 0 var(--coni-espacio-12)}
.p-lista-fin .acciones{margin-top:0}
.p-lista-bien{display:grid;gap:var(--coni-espacio-6);max-width:var(--coni-ancho-lectura)}
.p-lista-bien .nota{margin:0}
.p-lista-cada ul.lista{margin-top:var(--coni-espacio-2)}
.p-lista-mejorar{color:var(--coni-tinta-2)}

/* ---- plegar y desplegar (la revisión y «Mejorar mi marca»): botones con aria-expanded y el chevron de Lucide (20 px,
   currentColor, el mismo contorno de los plegables de coni.css): al abrir se cambia el ícono, sin girar. Desde el 26-10 (prueba
   del fundador), como los plegables: a la derecha cerrado y hacia abajo abierto ---- */
.btn.enlace.rv-plegar{display:inline-flex;align-items:center;gap:var(--coni-espacio-1);min-height:var(--coni-tactil);padding:0;border:0;
  color:var(--coni-tinta);text-align:left;white-space:normal;text-decoration:none}
@media (hover:hover){.btn.enlace.rv-plegar:hover:not(:disabled){text-decoration:underline;text-underline-offset:var(--coni-espacio-1)}}
.btn.enlace.rv-plegar::after{content:"";display:inline-block;flex:none;width:20px;height:20px;background:currentColor;transform:none;transition:none;
  clip-path:path("M6.9107 14.4107L11.3215 10L6.9107 5.5893A0.8333 0.8333 0 0 1 8.0893 4.4107L13.0893 9.4107A0.8333 0.8333 0 0 1 13.0893 10.5893L8.0893 15.5893A0.8333 0.8333 0 0 1 6.9107 14.4107Z")}
.btn.enlace.rv-plegar[aria-expanded="true"]::after{
  clip-path:path("M5.5893 6.9107L10 11.3215L14.4107 6.9107A0.8333 0.8333 0 0 1 15.5893 8.0893L10.5893 13.0893A0.8333 0.8333 0 0 1 9.4107 13.0893L4.4107 8.0893A0.8333 0.8333 0 0 1 5.5893 6.9107Z")}
.rv-grupo>h3>.rv-plegar{font:var(--coni-peso-semi) var(--coni-texto-titulo)/var(--coni-texto-titulo-interlinea) var(--coni-fuente-ui)}
/* un título plegable que ocupa dos líneas (en el celular): el chevron sigue a la última palabra, no se va al borde derecho
   (20-10, contraprueba del cruce del 19-10, punto 16). En línea, con 8 px arriba y abajo: una línea mide 44,6 px */
.rv-grupo>h3>.btn.enlace.rv-plegar{display:inline-block;padding:var(--coni-espacio-2) 0}
.rv-grupo>h3>.btn.enlace.rv-plegar::after{margin-left:var(--coni-espacio-1);vertical-align:middle}
.rv-grupo>.rv-plegar{margin-bottom:var(--coni-espacio-2)}
.rv-plegado{margin-top:var(--coni-espacio-2)}
/* recorte hacia 5-8 min (27-09, A.12): lo esencial a la vista; «cómo se usa» y lo informativo, plegados (desde el 20-10, en
   cada paso de la revisión: .rv-tema-cuerpo.sin-uso, más arriba) */
.rv-item.abierta>.rv-valor,.rv-item.abierta>.rv-uso,.rv-item.abierta>.rv-motivo,.rv-item.abierta>.rv-cita{display:none}
@media (forced-colors:active){
  .btn.enlace.rv-plegar::after,.eleccion-marca::after,.p-resumen-mas::after{forced-color-adjust:none;background:CanvasText}
}

/* ---- «Mejorar mi marca»: las mismas filas de la revisión por los 5 temas, cuántas tienen respuesta (en números, sin
   barras ni porcentajes) y «Responder» o «Corregir» ---- */
.mj-cuenta{margin-top:var(--coni-espacio-1);color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui);font-variant-numeric:tabular-nums}
.mj-cuenta:empty{display:none}
.p-mejorar .rv-grupo{margin-top:var(--coni-espacio-12)}
.p-mejorar .p-seguias+.rv-grupo{margin-top:var(--coni-espacio-6)}
.mj-grupo>h3{display:flex;align-items:baseline;justify-content:space-between;gap:var(--coni-espacio-3);min-width:0}
.mj-grupo-cuenta{flex:none;color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui);font-variant-numeric:tabular-nums}
.mj-item .rv-etq{color:var(--coni-tinta);font:var(--coni-peso-medio) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui)}
.mj-item .mj-mejora{color:var(--coni-tinta-2)}
.mj-item .rv-valor{margin-top:var(--coni-espacio-1)}
.mj-item .rv-valor.sin{margin-top:0;font-size:var(--coni-texto-chico)}
.mj-item.abierta .rv-valor.sin{display:none}
.mj-item.abierta .mj-mejora{display:none}
.mj-item .rv-editor .pregunta>legend,.mj-item .rv-editor .pregunta-texto{color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-base)/var(--coni-texto-base-interlinea) var(--coni-fuente-ui)}
.mj-empezar{margin-top:var(--coni-espacio-2);color:var(--coni-tinta-2);
  font:var(--coni-peso-regular) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
.mj-empezar .btn.enlace{display:inline;min-height:var(--coni-objetivo-min);padding:0;text-decoration:underline;text-underline-offset:var(--coni-espacio-1)}

/* ==================================================================== verificación de experiencia del 10.4d
   Lo opcional se dice en texto; lo que falta del paso nombra cada pregunta; en el celular, una sola línea arriba. */
.pregunta-cuerpo>.opcional{margin-top:0}
.p-linea-faltan-corto{display:none}

/* ==================================================================== S10: el guardado con el teclado del celular abierto
   Mientras se escribe con el teclado abierto (html.teclado-abierto, de vigilarTeclado) y algo no se guardó, la barra fija
   muestra el estado y su acción en lugar del tema y «Salir». El objetivo del botón no baja de 44 px. */
.p-barra-guardado{display:none}
@media (max-width:1023px){
  html.teclado-abierto .p-barra-guardado:not([hidden]){display:flex;align-items:center;gap:var(--coni-espacio-2);min-width:0;color:var(--coni-aviso-texto);
    font:var(--coni-peso-medio) var(--coni-texto-chico)/var(--coni-texto-chico-interlinea) var(--coni-fuente-ui)}
  html.teclado-abierto .p-barra-guardado[data-estado="fallo"]{color:var(--coni-error-texto)}
  html.teclado-abierto .p-barra-guardado .btn.enlace{flex:none;min-height:var(--coni-tactil)}
  html.teclado-abierto .p-barra-guardado:not([hidden])~.tema-boton,
  html.teclado-abierto .p-barra-guardado:not([hidden])~#salir{display:none}
}

/* ==================================================================== tableta y celular
   Desde 1023 px hacia abajo no hay columnas laterales; desde 820, márgenes de 16 px, el título de pantalla en 36 (coni.css),
   el botón principal del formulario a lo ancho y la raya de «sin guardar» dentro del margen. */
@media (max-width:1023px){
  .p-linea-marca,.p-faltan-linea{display:none}
  .p-linea-faltan-corto{display:inline}
  .p-progreso{margin-bottom:var(--coni-espacio-8)}
  /* F13 (20-10, cruce del 19-10 §5, tema 11): en «Tu bóveda está lista», una línea de 44 px: «BÓVEDA EN USO» a la izquierda
     (flotando) e «Ir a otro paso» a su lado; al abrirlo, los pasos van debajo, a lo ancho. El indicador de guardado solo
     aparece si algo no se guardó */
  .p-progreso.p-progreso-linea{display:flow-root}
  .p-progreso-linea .p-paso-linea{float:left;display:flex;align-items:center;min-height:var(--coni-tactil);margin-right:var(--coni-espacio-4)}
  .p-progreso-linea .p-saltar[open]>.p-pasos{clear:left}
  .p-progreso-linea .p-guardado[data-estado="guardado"]{display:none}
}
@media (max-width:820px){
  .p-barra{padding:var(--coni-espacio-2) var(--coni-espacio-4)}
  .p-aviso-salir{padding:var(--coni-espacio-3) var(--coni-espacio-4) 0}
  .p-marco{padding:var(--coni-espacio-6) var(--coni-espacio-4) var(--coni-espacio-16)}
  .preparar .entrada{font-size:var(--coni-texto-base);line-height:var(--coni-texto-base-interlinea)}
  .p-paso-cabecera{margin-bottom:var(--coni-espacio-10)}
  .p-primera-vez,.p-seguias{margin-top:calc(-1 * var(--coni-espacio-4));margin-bottom:var(--coni-espacio-10)}
  /* Coni que habla en «Tu bóveda está lista», a 24 px de la versión como la bienvenida del paso 1 (22-10: quedaba a 16).
     Solo el margen de arriba: el de abajo es el de .p-lista .p-coni-dice */
  .p-coni-dice{margin-top:calc(-1 * var(--coni-espacio-4))}
  .pregunta{margin:0 0 var(--coni-espacio-10) calc(-1 * var(--coni-espacio-3) - var(--coni-seleccion-ancho));padding-left:var(--coni-espacio-3)}
  /* la pregunta en el celular (20-10, cruce del 19-10 §5, tema 7): 22 px con peso 500 (--coni-texto-titulo y su
     interlínea, la fila nueva de DESIGN.md §2); en escritorio sigue en 28. La instrucción ya va aparte, en la ayuda */
  .pregunta>legend,.pregunta-texto{font-size:var(--coni-texto-titulo);line-height:var(--coni-texto-titulo-interlinea)}
  /* los fantasmas al borde (20-10): con 16 px de margen, la caja sale solo 16 (no más allá de la pantalla) y el anillo de
     foco va por dentro, como el de «Tu marca hasta ahora» abajo, para que no quede fuera de la pantalla */
  .p-fin-paso .acciones>.btn.suave:first-child,.p-mostrar{margin-left:calc(-1 * var(--coni-espacio-4))}
  .item-quitar{margin-right:calc(-1 * var(--coni-espacio-4))}
  .p-fin-paso .acciones>.btn.suave:first-child:focus-visible,.p-mostrar:focus-visible,.item-quitar:focus-visible{
    outline-offset:calc(-1 * (var(--coni-foco-ancho) + var(--coni-foco-separacion)))}
  /* «Revisar», «Corregir» y «Responder» de la revisión también llegan al borde de la pantalla (su caja sale 16 px): el anillo
     de foco, por dentro (20-10) */
  .rv-cabeza .btn:focus-visible{outline-offset:calc(-1 * (var(--coni-foco-ancho) + var(--coni-foco-separacion)))}
  .p-fin-paso .acciones .btn{min-height:var(--coni-alto-control)}
  .p-fin-paso .acciones .btn.primario{flex:1 1 auto}
  /* fuera del par «Volver» / «Seguir», las acciones van una debajo de otra y a lo ancho, la principal arriba (como
     «Empezar mi guion» y «No tengo una idea todavía» en la app; 20-10) */
  .p-fin-paso .acciones:not(.par-volver)>.btn{flex:1 1 100%}
  .p-lista-fin .acciones>.btn{flex:1 1 100%}
  .p-form .acciones .btn.primario{width:100%}
  /* un botón dentro de una frase («Reintentar», «Revisar», «Recuperarlo», «Empezar»): 44 px de objetivo en el celular, sin
     cambiar el dibujo (la caja crece, el texto queda en su línea) */
  .ayuda-linea .btn.enlace,.p-guardado-largo .btn.enlace,.mj-empezar .btn.enlace{display:inline-flex;align-items:center;
    min-height:var(--coni-tactil);vertical-align:middle;line-height:var(--coni-texto-chico-interlinea)}
  .rv-estado{padding:var(--coni-espacio-5)}
  .rv-grupo{margin-top:var(--coni-espacio-12)}
  .p-empresa{padding:var(--coni-espacio-4) var(--coni-espacio-5)}
  .p-marca-hoja-cabecera{padding-left:var(--coni-espacio-5)}
  .p-marca-hoja-cuerpo{padding-left:var(--coni-espacio-5);padding-right:var(--coni-espacio-5)}
}

/* ================================ Calma (23-10-2026) ================================
   La misma dirección de coni.css («Calma»): la barra de arriba del color de la página y sin raya; las opciones y el panel
   «Tu marca hasta ahora», rellenos suaves sin borde; el paso actual del índice en papel; etiquetas en minúscula */
.p-barra{background:var(--coni-pagina);border-bottom-color:transparent}
.eleccion{background:var(--coni-suave);border-color:transparent;border-radius:var(--coni-radio-m)}
.p-pasos a[aria-current="step"]{background:var(--coni-suave);border-color:transparent}
#linea-paso-donde,.p-marca-acceso-donde,.rv-paso>h4{text-transform:none;letter-spacing:0}
/* los demás recuadros de la preparación, también rellenos suaves sin borde: la línea de lo propuesto en la entrevista, cada
   marca de «Tus marcas», el panel «Tu marca hasta ahora», «Seguías en…» y la tarjeta del estado de la revisión */
.propuesta-linea,.p-empresa,.p-resumen,.p-seguias,.rv-estado{background:var(--coni-suave);border-color:transparent}
/* celular de lado (24-10-2026): con viewport-fit=cover (preparar.html), la página se corre hacia adentro lo que pida la muesca */
body{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}

/* ---- 27-10-2026 (pedido del fundador): en el computador, «Entrar», «Preparar mi marca» y sus pasos van centrados en la
   página (antes, a 96 px del borde izquierdo: se veía arrinconado). Con los pasos o «Tu marca hasta ahora» al lado, el
   conjunto se centra igual. El texto sigue alineado a la izquierda ---- */
@media (min-width:821px){
  .p-marco{padding-left:var(--coni-espacio-10);padding-right:var(--coni-espacio-10)}
  .p-marco .p-columna{margin-inline:auto}
}
@media (min-width:1024px){
  .p-marco.con-indice,.p-marco.con-resumen{justify-content:center}
}
/* y en «Crea tu cuenta», «Entrar», «Unirse» y «Restablecer», la columna mide lo que el formulario (440): así el bloque
   entero queda al medio (con la columna de 680, el formulario se veía corrido a la izquierda) */
@media (min-width:821px){
  .p-marco:not(.con-indice):not(.con-resumen) .p-columna:has(.p-principal > .p-acceso){max-width:var(--coni-acceso-formulario)}
}
/* el logo de la barra sigue a lo que se centró (20-10: el logo en la línea del título del acceso, de la columna o de los
   pasos): su margen izquierdo es la mitad de lo que sobra de la página alrededor del contenido de cada caso */
@media (min-width:821px){
  .p-barra,.p-aviso-salir{padding-left:max(var(--coni-espacio-10), calc((100% - var(--coni-columna)) / 2))}
  body:has(.p-principal > .p-acceso) .p-barra{padding-left:max(var(--coni-espacio-10), calc((100% - var(--coni-acceso-formulario)) / 2))}
}
@media (min-width:1024px){
  body:has(.p-marco.con-indice) .p-barra,body:has(.p-marco.con-indice) .p-aviso-salir{
    padding-left:max(var(--coni-espacio-10), calc((100% - var(--coni-pasos) - var(--coni-espacio-24) - var(--coni-columna)) / 2))}
  body:has(.p-marco.con-resumen) .p-barra,body:has(.p-marco.con-resumen) .p-aviso-salir{
    padding-left:max(var(--coni-espacio-10), calc((100% - var(--coni-columna) - var(--coni-espacio-12) - var(--coni-resumen)) / 2))}
}
@media (min-width:1280px){
  body:has(.p-marco.con-resumen.con-indice) .p-barra,body:has(.p-marco.con-resumen.con-indice) .p-aviso-salir{
    padding-left:max(var(--coni-espacio-10), calc((100% - var(--coni-pasos) - var(--coni-espacio-24) - var(--coni-columna) - var(--coni-espacio-12) - var(--coni-resumen)) / 2))}
}