/* Heyconi · preparar mi marca (Paso 10.4d, S6). Se carga después de tokens.css y taller.css y usa solo sus tokens, en claro y
   en oscuro. Las reglas de Taller valen aquí igual: tamaños solo desde --t-*, pesos por token, espacio desde --e-*, líneas de
   1 px, sin degradados, sombras solo --elev-*, duraciones solo --d-*. Especificación de interacción y movimiento:
   onboarding-mov.md con su crítica (diseño §5.3-§5.9).
   Lo que no se mueve: elegir una opción cambia solo el fondo y el borde (nunca el peso ni el grosor: no reacomoda el texto);
   una respuesta sin guardar pinta una raya lateral que ya existía transparente (no corre las opciones); la línea de paso,
   la de lo que falta y el indicador de guardado ocupan siempre una línea (su texto cambia sin mover el formulario). */

.preparar main:focus{outline:none}
/* lo oculto se oculta siempre, aunque su clase le dé display (el atributo hidden pierde contra display:grid o flex) */
.preparar [hidden]{display:none !important}
.saltar{position:absolute;left:var(--e-4);top:var(--e-2);z-index:50;padding:var(--e-2) var(--e-4);border-radius:var(--r-control);
  background:var(--tinta);color:var(--sobre-tinta);font-weight:var(--w-enfasis);text-decoration:none;transform:translateY(-200%)}
.saltar:focus{transform:none;outline:var(--anillo);outline-offset:var(--anillo-sep)}

/* ---- barra: fija arriba, fuera de lo que cambia de paso ---- */
.p-barra{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);
  min-height:var(--alto-barra);padding:var(--e-2) var(--e-4);border-bottom:var(--linea);background:var(--superficie);
  view-transition-name:p-barra}
.p-barra .logo{margin:0;font-size:var(--t-lead);display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e-1)}
.p-barra-acciones{display:flex;align-items:center;gap:var(--e-1)}
html{scroll-padding-top:calc(var(--alto-barra) + var(--e-3))}
::view-transition-group(root){animation:none}      /* sin esto la transición dura 250 ms (el valor del navegador) */
::view-transition-group(p-barra){animation:none;z-index:1}
::view-transition-old(p-barra),::view-transition-new(p-barra){animation:none}
.p-aviso-salir{max-width:var(--ancho-lectura);margin:var(--e-3) auto 0;padding:0 var(--e-4)}
.p-aviso-salir .aviso{margin:0;flex-wrap:wrap}

/* ---- marco: índice a la izquierda desde 1024 px; una columna por debajo ---- */
.p-marco{width:100%;padding:var(--e-5) var(--e-4) var(--e-8)}
.p-columna{min-width:0;width:100%;max-width:var(--ancho-lectura);margin:0 auto}
.p-indice{display:none}
@media (min-width:1024px){
  .p-marco.con-indice{display:grid;grid-template-columns:200px minmax(0,var(--ancho-lectura));gap:var(--e-7);justify-content:center;
    padding-top:var(--e-6)}
  .p-marco.con-indice .p-indice:not([hidden]){display:block;position:sticky;top:calc(var(--alto-barra) + var(--e-6));align-self:start}
  .p-marco.con-indice .p-columna{margin:0}
  .p-saltar{display:none}
}

/* ---- pasos (hitos): número, nombre y estado en texto; sin porcentajes ---- */
.p-pasos{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.p-pasos a{position:relative;display:grid;align-content:center;min-height:44px;padding:var(--e-2) var(--e-3);border-radius:var(--r-control);
  text-decoration:none;color:var(--tinta-2);transition:background-color var(--d-rapido) var(--c-salida)}
.p-pasos a[aria-current="step"]{color:var(--tinta);font-weight:var(--w-enfasis)}
.p-pasos a[aria-current="step"]::before{content:"";position:absolute;left:0;top:var(--e-2);bottom:var(--e-2);width:2px;border-radius:2px;background:var(--nota)}
@media (hover:hover){.p-pasos a:hover{background:var(--superficie-2);color:var(--tinta)}}
.p-paso-nombre{font-size:var(--t-cuerpo)}
.p-paso-estado{font-size:var(--t-meta);font-weight:var(--w-texto);color:var(--tinta-2)}
.p-paso-estado.pend{color:var(--pend)}
/* una fila del índice con el fondo gris nunca lleva texto --pend (par prohibido): al pasar el cursor, el estado va en --tinta */
@media (hover:hover){.p-pasos a:hover .p-paso-estado.pend{color:var(--tinta)}}

/* ---- línea de progreso (en el flujo, no fija) ---- */
.p-progreso{display:grid;gap:2px;margin-bottom:var(--e-5);padding-bottom:var(--e-2);border-bottom:var(--linea)}
.p-paso-linea{font-size:var(--t-meta);font-weight:var(--w-texto);letter-spacing:0;color:var(--tinta-2);line-height:var(--lh-cuerpo);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-faltan-linea{font-size:var(--t-meta);font-weight:var(--w-enfasis);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-saltar>summary{font-size:var(--t-meta);color:var(--tinta-2);font-weight:var(--w-texto);min-height:44px}
.p-saltar[open]>.p-pasos{margin:var(--e-1) 0 var(--e-3)}
.p-guardado{display:flex;align-items:center;gap:var(--e-2);min-height:44px;font-size:var(--t-meta);color:var(--tinta-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;min-width:0}
.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:50%;background:currentColor}
.p-guardado[data-estado="guardando"] .p-guardado-punto{background:transparent;border:1px solid currentColor}
.p-guardado[data-estado="sin-conexion"],.p-guardado[data-estado="conflicto"],.p-guardado[data-estado="sesion"]{color:var(--pend)}
.p-guardado[data-estado="fallo"]{color:var(--alerta)}
.p-guardado .btn.enlace{flex:none;min-height:44px}

/* ---- paso ---- */
.p-paso-cabecera{display:grid;gap:var(--e-2);margin-bottom:var(--e-6)}
.p-paso-cabecera h2:focus{outline:none}
.p-paso-cabecera h2:focus-visible{outline:var(--anillo);outline-offset:var(--anillo-sep);border-radius:var(--r-control)}
.entrada{color:var(--tinta-2);max-width:var(--ancho-lectura);text-wrap:pretty}
.p-primera-vez{background:var(--papel);border:var(--linea);border-radius:var(--r-panel);padding:var(--e-3) var(--e-4);margin-bottom:var(--e-5);
  max-width:var(--ancho-lectura)}
.p-recuperado{margin-bottom:var(--e-5)}

/* ---- pregunta: la raya lateral existe siempre (transparente); sin guardar, solo cambia su color ---- */
.pregunta{position:relative;border:0;border-left:1px solid transparent;margin:0 0 var(--e-6) calc(-1 * var(--e-3) - 1px);
  padding:0 0 0 var(--e-3);min-width:0;scroll-margin-top:calc(var(--alto-barra) + var(--e-4));
  transition:border-color var(--d-rapido) var(--c-salida)}
.pregunta:focus{outline:none}
.pregunta.sin-guardar{border-left-color:var(--pend)}
.pregunta>legend,.pregunta-texto{display:block;float:left;width:100%;padding:0;margin:0 0 var(--e-1);font-size:var(--t-lead);
  font-weight:var(--w-enfasis);line-height:var(--lh-titulo);max-width:var(--ancho-lectura);text-wrap:pretty}
.pregunta>legend+*,.pregunta-texto+*{clear:left}
.para-que{font-size:var(--t-meta);color:var(--tinta-2);max-width:var(--ancho-lectura);text-wrap:pretty}
.ejemplo{font:var(--w-texto) var(--t-meta)/var(--lh-cuerpo) var(--f-nota);color:var(--tinta-2);max-width:var(--ancho-lectura)}
.ejemplo b{font-family:var(--f-app);font-weight:var(--w-enfasis)}
.del-dueno{font-size:var(--t-meta);color:var(--nota);font-weight:var(--w-enfasis);max-width:var(--ancho-lectura)}
.pregunta-cuerpo{display:grid;gap:var(--e-1);margin-top:var(--e-3)}
.pregunta-cuerpo>.para-que,.pregunta-cuerpo>.ejemplo{margin-top:-2px}
.control{margin-top:var(--e-2);min-width:0}

/* campos de texto: los de una línea y las casillas de correo y contraseña se ven como los de taller.css */
.preparar input[type=email],.preparar input[type=password],.preparar input[type=tel]{width:100%;border:var(--linea-control);
  border-radius:var(--r-control);padding:var(--e-3);background:var(--papel);color:var(--tinta);font-size:var(--t-cuerpo);
  line-height:var(--lh-cuerpo);transition:border-color var(--d-rapido) var(--c-salida)}
.preparar input[type=text],.preparar input[type=email],.preparar input[type=password],.preparar input[type=tel]{min-height:48px}
.preparar textarea.chica{min-height:calc(2lh + 2 * var(--e-3) + 2px)}
.preparar textarea.pegado{min-height:calc(6lh + 2 * var(--e-3) + 2px)}
.preparar [aria-invalid="true"]{border-color:var(--pend)}
.p-campo.con-error input{border-color:var(--alerta)}

/* ---- una opción: la fila entera es el objetivo (48 px); nada preseleccionado; la marca nativa cambia al instante ---- */
.elecciones{display:grid;gap:var(--e-2)}
.eleccion{display:flex;gap:var(--e-3);align-items:flex-start;min-height:48px;padding:var(--e-3) var(--e-4) var(--e-3) var(--e-3);
  border:var(--linea-control);border-radius:var(--r-control);background:var(--papel);color:var(--tinta);cursor:pointer;line-height:1.4;
  -webkit-tap-highlight-color:transparent;
  transition:background-color var(--d-rapido) var(--c-salida),border-color var(--d-rapido) var(--c-salida)}
.eleccion input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--tinta)}
.eleccion-texto{min-width:0;overflow-wrap:anywhere}
@media (hover:hover){.eleccion:hover{background:var(--superficie-2)}}
.eleccion:active{background:var(--superficie-2);transition:none}
.eleccion.marcada{background:var(--nota-suave);border-color:var(--nota)}
@media (hover:hover){.eleccion.marcada:hover{background:var(--nota-suave)}}
@supports selector(:has(*)){
  .eleccion input:focus-visible{outline:none}
  .eleccion:has(input:focus-visible){outline:var(--anillo);outline-offset:var(--anillo-sep)}
}
.eleccion.frase .eleccion-texto{font-family:var(--f-nota)}
.eleccion.deshabilitada{background:transparent;border-style:dashed;color:var(--tinta-2);cursor:not-allowed}
.otra-campo{display:grid;gap:var(--e-1);padding:var(--e-1) 0 0 calc(var(--e-3) + 20px + var(--e-3))}
.aviso-opcion{font-size:var(--t-meta);color:var(--tinta);border-left:1px solid var(--nota);padding-left:var(--e-3);max-width:var(--ancho-lectura)}

/* sub-campos (grupos y listas) */
.sub-campos{display:grid;gap:var(--e-4)}
.campo-sub{display:grid;gap:var(--e-1);min-width:0;border:0;margin:0;padding:0}
.campo-sub>label:not(.eleccion),.campo-sub>legend{font-size:var(--t-meta);font-weight:var(--w-enfasis);color:var(--tinta);padding:0;margin-bottom:var(--e-1)}
.campo-sub>.ejemplo{margin-top:-2px}
.lista-items{display:grid;gap:var(--e-5)}
.item{border:0;margin:0;padding:0 0 0 var(--e-3);border-left:var(--linea);min-width:0;display:grid;gap:var(--e-3)}
.item>legend{font-size:var(--t-meta);font-weight:var(--w-enfasis);color:var(--tinta-2);padding:0;margin-bottom:var(--e-1)}
.item-quitar{justify-self:end}
.lista-textos{display:grid;gap:var(--e-2)}
.agregar{justify-self:start;margin-top:var(--e-3)}

/* ---- «¿No tienes esta respuesta?»: plegado, con los estados admitidos como radios nativos ---- */
.sin-respuesta{margin-top:0}
.sin-respuesta>summary{font-size:var(--t-meta);font-weight:var(--w-texto);color:var(--tinta-2);min-height:44px}
.sin-respuesta .elecciones{margin-top:var(--e-1)}
.sin-respuesta .eleccion{min-height:44px;padding-block:var(--e-2);font-size:var(--t-meta)}

/* la ranura de ayuda: contador, aviso, nota o «no se guardó», una sola por pregunta. Vacía no ocupa lugar: lo que aparece
   ahí queda debajo de lo que se está escribiendo, y si queda arriba de lo enfocado, preparar.js compensa el desplazamiento */
.ayuda-linea{margin-top:var(--e-1);font-size:var(--t-meta);color:var(--tinta-2);
  font-variant-numeric:tabular-nums;max-width:var(--ancho-lectura);text-wrap:pretty}
.ayuda-linea:empty{display:none}
.pregunta-cuerpo>div:empty{display:none}
.ayuda-linea.pend{color:var(--pend)}
.ayuda-linea.error{color:var(--alerta)}
.ayuda-linea .btn.enlace{display:inline;min-height:0;padding:0 2px;font-size:var(--t-meta)}

/* propuesta del community manager y conflicto: junto al campo, con texto (nunca solo color) */
.propuesta-linea{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-3);align-items:center;margin-top:var(--e-2);padding:var(--e-2) var(--e-3);
  background:var(--papel);border:var(--linea);border-radius:var(--r-control);font-size:var(--t-meta);max-width:var(--ancho-lectura)}
.conflicto{display:grid;gap:var(--e-2);margin-top:var(--e-3);padding:var(--e-3) var(--e-4);background:var(--papel);
  border:1px solid var(--pend);border-radius:var(--r-control);max-width:var(--ancho-lectura)}
.conflicto p{font-size:var(--t-meta)}
.conflicto .guardada{font-family:var(--f-nota);color:var(--tinta-2);overflow-wrap:anywhere}
.conflicto .fila{gap:var(--e-2)}

/* ---- texto pegado, plegado al comienzo del paso 1 ---- */
.pegado-plegable{margin:0 0 var(--e-6);border-top:var(--linea);border-bottom:var(--linea);padding:var(--e-2) 0}
.pegado-plegable>summary{min-height:44px;white-space:normal}
.pegado-plegable[open]>summary{margin-bottom:var(--e-2)}
.pegado-plegable .pregunta{margin-bottom:var(--e-3)}

/* ---- fin del paso: lo que falta, el indicador repetido y las dos acciones ---- */
.p-fin-paso{display:grid;gap:var(--e-2);margin-top:var(--e-6);padding-top:var(--e-4);border-top:var(--linea)}
.p-faltan-paso{max-width:var(--ancho-lectura);text-wrap:pretty}
.p-guardado-largo{font-size:var(--t-meta);color:var(--tinta-2);min-height:1.5em;max-width:var(--ancho-lectura);text-wrap:pretty}
.p-guardado-largo.pend{color:var(--pend)}
.p-guardado-largo.error{color:var(--alerta)}
.p-guardado-largo .btn.enlace{display:inline-block;min-height:24px;padding:0 2px;font-size:var(--t-meta);line-height:24px;vertical-align:baseline}
.p-fin-paso .acciones{margin-top:var(--e-2);justify-content:space-between}
.p-fin-paso .acciones .btn.primario{margin-left:auto}
.p-lista-faltan{margin:var(--e-2) 0 0;padding-left:var(--e-5);display:grid;gap:var(--e-1)}
.p-lista-faltan a{display:inline-flex;align-items:center;min-height:44px}

/* ---- acceso: una acción por pantalla ---- */
.p-acceso{max-width:460px;margin:0 auto;display:grid;gap:var(--e-4)}
.p-acceso h1{font-size:var(--t-titulo);letter-spacing:-.015em}
.p-acceso h1:focus{outline:none}
.p-acceso .entrada{margin-top:calc(-1 * var(--e-2))}
.p-form{display:grid;gap:var(--e-4)}
.p-campo{display:grid;gap:var(--e-1);min-width:0;border:0;margin:0;padding:0}
.p-campo>label,.p-campo>legend{font-size:var(--t-meta);font-weight:var(--w-enfasis);color:var(--tinta);padding:0;margin-bottom:var(--e-1)}
.p-campo .ayuda-linea{margin-top:0}
.p-campo .ayuda-linea:empty{display:none}
.p-mostrar{justify-self:start}
.p-form .acciones{margin-top:var(--e-1)}
.p-enlaces{display:grid;gap:0;font-size:var(--t-meta);color:var(--tinta-2)}
.p-enlaces a{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta)}
.p-consecuencia{font-size:var(--t-meta);color:var(--tinta-2);border-left:1px solid var(--nota);padding-left:var(--e-3)}
.p-empresas{list-style:none;margin:0;padding:0;display:grid;gap:var(--e-2)}
.p-empresa{display:grid;gap:2px;min-height:44px;padding:var(--e-3) var(--e-4);background:var(--papel);border:var(--linea);
  border-radius:var(--r-panel);text-decoration:none;color:var(--tinta);transition:border-color var(--d-rapido) var(--c-salida)}
@media (hover:hover){.p-empresa:hover{border-color:var(--borde-control)}}
.p-empresa b{font-size:var(--t-cuerpo)}
.p-empresa span{font-size:var(--t-meta);color:var(--tinta-2)}
.p-empresa span.pend{color:var(--pend)}
.p-empresa span.p-empresa-accion{margin-top:var(--e-1);font-weight:var(--w-enfasis);color:var(--tinta);text-decoration:underline;text-underline-offset:3px}
.p-faltan-listo{color:var(--tinta-2)}
.p-lista-cada{margin-top:var(--e-4)}
.p-lista-cada .lista{margin-top:var(--e-1)}
.p-lista-mejorar{margin-top:var(--e-3);color:var(--tinta-2)}
.p-lista-mejorar a{color:var(--tinta)}
.p-lista-bien .nota{margin-top:var(--e-4)}

/* ---- celular ---- */
@media (max-width:820px){
  /* el logo en el mismo lugar que en la app (barra-movil: 16 px de margen y el logo con su relleno de botón) */
  .p-barra{padding:var(--e-2) var(--e-4)}
  .p-barra .logo{padding:0 var(--e-3)}
  .pregunta{margin-bottom:var(--e-6)}
  /* la raya de «sin guardar» queda dentro del margen, no pegada al borde de la pantalla */
  .pregunta{margin-left:calc(-1 * var(--e-2) - 1px);padding-left:var(--e-2)}
  .p-fin-paso .acciones .btn{min-height:48px}
}
.ninguna-fila{margin-top:var(--e-2)}
.p-general:empty{display:none}

/* ==================================================================== S7: «Tu marca hasta ahora», revisión, confirmación
   Desde 1024 px el resumen es una columna a la derecha (desde 1280, con los pasos a la izquierda; entre 1024 y 1279 los
   pasos van en «Ir a otro paso», arriba). Por debajo, un acceso compacto fijo abajo que abre la misma lista en una hoja
   (<dialog>): el acceso se oculta mientras el teclado del celular está abierto y, con poco alto, deja de ser fijo. */
.p-resumen{display:none}
@media (min-width:1024px){
  .p-marco.con-resumen{display:grid;grid-template-columns:minmax(0,var(--ancho-lectura)) 300px;gap:var(--e-7);justify-content:center;
    padding-top:var(--e-6)}
  .p-marco.con-resumen .p-columna{margin:0}
  .p-marco.con-resumen .p-indice{display:none}
  .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 */
  .p-marco.con-resumen .p-resumen:not([hidden]){display:block;position:sticky;top:calc(var(--alto-barra) + var(--e-6));align-self:start;
    max-height:calc(100vh - var(--alto-barra) - var(--e-7));max-height:calc(100dvh - var(--alto-barra) - var(--e-7));overflow:auto;
    overscroll-behavior:contain}
}
@media (min-width:1280px){
  .p-marco.con-resumen.con-indice{grid-template-columns:184px minmax(0,var(--ancho-lectura)) 280px;gap:var(--e-6)}
  .p-marco.con-resumen.con-indice .p-indice:not([hidden]){display:block;position:sticky;top:calc(var(--alto-barra) + var(--e-6));align-self:start}
  /* 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}
/* el resumen va sobre --papel (nunca texto --pend sobre --superficie-2) y no parpadea al cambiar de paso */
.p-resumen{background:var(--papel);border:var(--linea);border-radius:var(--r-panel);padding:var(--e-4);view-transition-name:p-resumen}
::view-transition-group(p-resumen),::view-transition-old(p-resumen),::view-transition-new(p-resumen){animation:none}
.p-resumen>h2{font-size:var(--t-cuerpo);font-weight:var(--w-enfasis);margin:0}
.r-estado{font-size:var(--t-meta);color:var(--tinta-2);margin-top:var(--e-1)}
.r-estado.pend{color:var(--pend)}
.r-vacio{font-size:var(--t-meta);color:var(--tinta-2);margin-top:var(--e-2)}
.r-paso{border-top:var(--linea);margin-top:var(--e-3);padding-top:var(--e-2)}
.r-paso>h3{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 var(--e-2);font-size:var(--t-meta);font-weight:var(--w-enfasis);
  line-height:var(--lh-cuerpo);margin:0}
.r-paso-estado{font-weight:var(--w-texto);color:var(--tinta-2)}
.r-paso-ir{display:inline-flex;align-items:center;min-height:44px;color:var(--tinta);text-decoration:none}
.r-paso-ir[aria-current="step"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover){.r-paso-ir:hover{text-decoration:underline;text-underline-offset:3px}}
.r-paso>h3{align-items:center}
.r-paso-estado.pend{color:var(--pend)}
.r-filas{list-style:none;margin:var(--e-1) 0 0;padding:0;display:grid;gap:2px}
/* 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(--e-2);align-items:start;width:100%;min-height:44px;
  padding:var(--e-2);margin:0 calc(-1 * var(--e-2));width:calc(100% + 2 * var(--e-2));border:0;border-radius:var(--r-control);
  background:transparent;color:var(--tinta);font-family:inherit;font-size:var(--t-meta);line-height:1.4;text-align:left;cursor:pointer;
  transition:background-color var(--d-rapido) var(--c-salida)}
@media (hover:hover){.r-fila:hover{background:var(--superficie-2)}.r-fila:hover .pend{color:var(--tinta)}}
.r-etq{grid-column:1;color:var(--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{color:var(--pend)}
.r-nota{grid-column:1;color:var(--tinta-2)}
.r-accion{grid-column:2;grid-row:1;color:var(--nota);font-weight:var(--w-enfasis);white-space:nowrap}

/* acceso compacto y hoja (celular y tableta) */
.p-marca-acceso{display:none}
@media (max-width:1023px){
  .p-marca-acceso:not([hidden]){position:fixed;left:var(--e-3);right:var(--e-3);bottom:calc(var(--e-3) + env(safe-area-inset-bottom));z-index:30;
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--e-3);min-height:48px;padding:var(--e-2) var(--e-4);
    background:var(--papel);color:var(--tinta);border:var(--linea-control);border-radius:var(--r-panel);box-shadow:var(--elev-flota);
    font-family:inherit;font-size:var(--t-meta);font-weight:var(--w-enfasis);line-height:1.3;text-align:left;cursor:pointer;
    max-width:calc(var(--ancho-lectura) + 2 * var(--e-4));margin:0 auto}
  .p-marca-acceso.teclado:not([hidden]){display:none}
  html.con-acceso .p-marco{padding-bottom:calc(48px + var(--e-3) + var(--e-7))}
  html.con-acceso{scroll-padding-bottom:calc(48px + var(--e-3) + var(--e-5))}
}
@media (max-width:1023px) and (max-height:480px){
  .p-marca-acceso:not([hidden]){position:static;display:flex;width:calc(100% - 2 * var(--e-4));margin:0 var(--e-4) var(--e-6)}
  html.con-acceso .p-marco{padding-bottom:var(--e-5)}
  html.con-acceso{scroll-padding-bottom:0}
}
.p-marca-acceso-estado{font-weight:var(--w-texto);color:var(--tinta-2)}
.p-marca-acceso-estado.pend{color:var(--pend)}
.p-marca-hoja{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:85vh;max-height:85dvh;padding:0;
  display:none;flex-direction:column;border:0;border-top:var(--linea);border-radius:var(--r-panel) var(--r-panel) 0 0;
  background:var(--papel);color:var(--tinta);box-shadow:var(--elev-flota)}
.p-marca-hoja[open]{display:flex}
.p-marca-hoja::backdrop{background:var(--velo)}
.p-marca-hoja-cabecera{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);min-height:var(--alto-barra);
  padding:var(--e-2) var(--e-2) var(--e-2) var(--e-4);border-bottom:var(--linea)}
.p-marca-hoja-cabecera h2{font-size:var(--t-cuerpo);font-weight:var(--w-enfasis);margin:0}
.p-marca-hoja-cabecera h2:focus{outline:none}
.p-marca-hoja-cabecera h2:focus-visible{outline:var(--anillo);outline-offset:var(--anillo-sep);border-radius:var(--r-control)}
.p-marca-hoja-cuerpo{overflow:auto;overscroll-behavior:contain;padding:var(--e-2) var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom))}
.p-marca-hoja-cuerpo .r-paso:first-of-type{margin-top:var(--e-2)}

/* «Seguías en…» y «Te toca confirmar», arriba del paso: entran con el paso y no cambian mientras se responde */
.p-seguias{display:grid;gap:var(--e-2);margin:0 0 var(--e-6);padding:var(--e-3) var(--e-4);background:var(--papel);border:var(--linea);
  border-radius:var(--r-panel);max-width:var(--ancho-lectura)}
.p-seguias p{text-wrap:pretty}
.p-seguias .fila{gap:var(--e-2) var(--e-4)}
.p-confirmar-enlace{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-meta);font-weight:var(--w-enfasis);color:var(--nota)}

/* revisión, confirmación del dueño y bóveda lista */
.rv-estado{display:grid;gap:var(--e-2);margin:0 0 var(--e-6);padding:var(--e-3) var(--e-4);background:var(--papel);border:var(--linea);
  border-radius:var(--r-panel);max-width:var(--ancho-lectura)}
.rv-estado.pend{border-color:var(--pend)}
.rv-estado b{font-weight:var(--w-enfasis)}
.rv-faltan{margin:var(--e-2) 0 var(--e-6)}
.rv-grupo{margin-top:var(--e-7)}
.rv-grupo>h3{font-size:var(--t-lead);font-weight:var(--w-enfasis);line-height:var(--lh-titulo);margin:0 0 var(--e-1)}
.rv-grupo>.entrada{margin-bottom:var(--e-3)}
.rv-paso>h4{font-size:var(--t-cuerpo);font-weight:var(--w-enfasis);margin:var(--e-5) 0 0}
.rv-lista{list-style:none;margin:0;padding:0}
.rv-item{display:grid;gap:2px;padding:var(--e-3) 0;border-top:var(--linea);min-width:0}
.rv-item:first-child{border-top:0}
.rv-etq{font-size:var(--t-meta);color:var(--tinta-2);font-weight:var(--w-enfasis)}
.rv-valor{overflow-wrap:anywhere;white-space:pre-line}
.rv-valor.pend{color:var(--pend)}
.rv-uso,.rv-quien,.rv-motivo{font-size:var(--t-meta);color:var(--tinta-2);max-width:var(--ancho-lectura)}
.rv-cita{font:var(--w-texto) var(--t-meta)/var(--lh-cuerpo) var(--f-nota);color:var(--tinta);border-left:1px solid var(--nota);
  padding-left:var(--e-3);margin-top:var(--e-1);max-width:var(--ancho-lectura);overflow-wrap:anywhere}
.rv-item>.fila{margin-top:var(--e-1)}
.rv-editor{margin-top:var(--e-3)}
.rv-editor .pregunta{margin-bottom:var(--e-3)}
.rv-nota-confirmacion{font-size:var(--t-meta);color:var(--tinta-2);border-left:1px solid var(--nota);padding-left:var(--e-3);
  margin-top:var(--e-7);max-width:var(--ancho-lectura)}
.rv-usar{display:grid;gap:var(--e-2)}
.rv-usar-motivo{max-width:var(--ancho-lectura);text-wrap:pretty}
.rv-usar-motivo.pend{color:var(--pend)}
.rv-mensaje{display:grid;gap:var(--e-2);margin-top:var(--e-2);max-width:var(--ancho-lectura)}
.rv-mensaje textarea{min-height:calc(4lh + 2 * var(--e-3) + 2px)}
.confirmada-linea{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-3);align-items:center;margin-top:var(--e-2);font-size:var(--t-meta);
  color:var(--tinta-2);max-width:var(--ancho-lectura)}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.p-lista-bien{display:grid;gap:var(--e-3);max-width:var(--ancho-lectura)}
.p-empresas>li{display:grid;gap:0}
.p-empresa-corregir{display:inline-flex;align-items:center;min-height:44px;justify-self:start;font-size:var(--t-meta);color:var(--tinta-2);padding:0 var(--e-4)}
/* 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(--e-6) auto 0;max-width:var(--ancho-lectura)}}
.rv-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);min-width:0}
.rv-cabeza .btn.enlace{flex:none;min-height:44px;padding:0 var(--e-1)}
.rv-estado .p-lista-faltan{margin-top:0}
.rv-estado .p-lista-faltan .btn.enlace{display:inline-flex;justify-content:flex-start;text-align:left;min-height:44px;padding:var(--e-1) 0;
  font-weight:var(--w-texto);text-decoration:underline;text-underline-offset:3px}
.p-lista-version{font-size:var(--t-meta);color:var(--tinta-2);font-variant-numeric:tabular-nums}

/* ==================================================================== 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. */
.opcional{font-size:var(--t-meta);color:var(--tinta-2);max-width:var(--ancho-lectura)}
.pregunta-cuerpo>.opcional{margin-top:-2px}
.p-faltan-paso:empty{display:none}
.p-faltan-paso .p-lista-faltan{margin-top:var(--e-1)}
.p-faltan-paso .btn.enlace{display:inline-flex;justify-content:flex-start;text-align:left;min-height:44px;padding:var(--e-1) 0;
  font-weight:var(--w-texto);text-decoration:underline;text-underline-offset:3px}
.p-linea-faltan-corto{display:none}
@media (max-width:1023px){
  .p-linea-marca,.p-faltan-linea{display:none}
  .p-linea-faltan-corto{display:inline}
  .p-progreso{margin-bottom:var(--e-4)}
}
.p-seguias-antes{font-size:var(--t-meta);color:var(--tinta-2)}
.p-seguias-antes a{color:var(--tinta)}
.p-confirmar-opcional{font-size:var(--t-cuerpo);font-weight:var(--w-enfasis);margin:var(--e-6) 0 var(--e-1)}
.rv-estado .acciones{margin-top:var(--e-1)}

/* ==================================================================== recorte hacia 5-8 min (27-09, Addendum A.12)
   La revisión se escanea: lo esencial a la vista; «cómo se usa», lo que se pregunta en cada video y lo de más adelante,
   plegados detrás de un botón con aria-expanded. El indicador gira sin mover el texto. */
.rv-grupo.sin-uso .rv-uso{display:none}
.rv-item.abierta>.rv-valor,.rv-item.abierta>.rv-uso,.rv-item.abierta>.rv-motivo,.rv-item.abierta>.rv-cita{display:none}
.btn.enlace.rv-plegar{display:inline-flex;align-items:center;gap:var(--e-1);min-height:44px;padding:0;border:0;text-align:left;white-space:normal}
.btn.enlace.rv-plegar::after{content:"";display:inline-block;flex:none;width:6px;height:6px;margin-left:var(--e-1);
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform var(--d-medio) var(--c-salida)}
.btn.enlace.rv-plegar[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.rv-grupo>h3>.rv-plegar{font-size:var(--t-lead);font-weight:var(--w-enfasis);line-height:var(--lh-titulo);color:var(--tinta)}
.rv-grupo>.rv-plegar{margin-bottom:var(--e-1)}
.rv-plegado{margin-top:var(--e-2)}

/* ==================================================================== S8: «Mejorar mi marca»
   Las mismas filas de la revisión, por los 5 temas de la preparación: la respuesta (o «Sin responder», en tinta-2: no es
   una falta), una línea con cómo mejora los guiones y «Responder» o «Corregir». Arriba y en cada tema, cuántas tienen
   respuesta, en números tabulares y sin barras ni porcentajes. */
.mj-cuenta{font-size:var(--t-meta);color:var(--tinta-2);font-variant-numeric:tabular-nums;margin-top:var(--e-1)}
.p-mejorar .mj-nota-cm{margin:0 0 var(--e-4)}
.p-mejorar .rv-grupo{margin-top:var(--e-6)}
.p-mejorar .p-seguias+.rv-grupo,.p-mejorar .mj-nota-cm+.rv-grupo{margin-top:var(--e-4)}
.mj-grupo>h3{display:flex;align-items:baseline;justify-content:space-between;gap:var(--e-3);min-width:0}
.mj-grupo-cuenta{flex:none;font-size:var(--t-meta);font-weight:var(--w-texto);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.mj-item .rv-etq{font-size:var(--t-cuerpo);color:var(--tinta)}
.mj-item .mj-mejora{color:var(--tinta-2)}
.mj-item .rv-valor{margin-top:var(--e-1)}
.mj-item .rv-valor.sin{font-size:var(--t-meta);margin-top:0}
.mj-item.abierta .rv-valor.sin{display:none}
/* verificación final: con la fila abierta, la pregunta dice lo mismo que la línea de para qué sirve (no se repite) y no
   pesa más que el nombre de la fila */
.mj-item.abierta .mj-mejora{display:none}
.mj-item .rv-editor .pregunta>legend,.mj-item .rv-editor .pregunta-texto{font-size:var(--t-cuerpo);font-weight:var(--w-texto);color:var(--tinta-2)}
.mj-empezar{font-size:var(--t-meta);color:var(--tinta-2);margin-top:var(--e-2)}
.mj-empezar .btn.enlace{display:inline;min-height:24px;padding:0;font-size:var(--t-meta);text-decoration:underline;text-underline-offset:3px}
.rv-valor.sin{color:var(--tinta-2)}
.mj-item .mj-dueno{border-left:1px solid var(--nota);padding-left:var(--e-2)}
.pregunta input.numero{max-width:12ch}
.p-empresa-enlaces{display:flex;flex-wrap:wrap;gap:0 var(--e-1)}
.p-pasos .p-paso-mejorar{margin-top:var(--e-1)}

/* ==================================================================== 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»: lo de arriba quedó fuera de la vista y el aviso junto a la
   pregunta puede quedar bajo el teclado. 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(--e-2);min-width:0;
    font-size:var(--t-meta);font-weight:var(--w-enfasis);color:var(--pend)}
  html.teclado-abierto .p-barra-guardado[data-estado="fallo"]{color:var(--alerta)}
  html.teclado-abierto .p-barra-guardado .btn.enlace{flex:none;min-height:44px}
  html.teclado-abierto .p-barra-guardado:not([hidden])~.tema-boton,
  html.teclado-abierto .p-barra-guardado:not([hidden])~#salir{display:none}
}